Styling and CSS

CSS Import Issues

1. Why are my components not styled correctly?

If you are using the ready-to-use components, you can apply styles to them by importing the styles from the @unbxd-ui/react-search-components package.

import "@unbxd-ui/react-search-components/styles/index.css";

The React Search SDK also allows you to style the components using your own class names.

import "@unbxd-ui/react-search-components/styles/index.css";
 
<UnbxdSearchCSRWrapper>
	<SearchBox styles={{ root: "searchbox-wrapper" }} /> // Apply custom styles to the SearchBox component
</UnbxdSearchCSRWrapper>;

For more details on styling each component, please refer to the styles prop in the documentation page of each component.

2. How do I import CSS files properly?

The default import for the CSS file for the components is as follows:

import "@unbxd-ui/react-search-components/styles/index.css";

If the above import does not work, you can use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/index.css");

3. Why doesn't `require.resolve()` work for CSS imports?

The require.resolve() function is primarily for resolving Javascript module paths.
CSS files are handled by webpack loaders, not Node's module resolution system.

If you're having issues with the CSS import:

Make sure your bundler is configured to handle CSS imports.
Check if you have the necessary loaders installed.

Ensure your webpack/bundler configuration includes CSS handling:

// webpack.config.js
module: {
	rules: [
		{
			test: /\.css$/,
			use: ["style-loader", "css-loader"],
		},
	];
}

4. Can I use CSS modules with the components?

The CSS files for the components are built and distributed as regular CSS files. They don't have the .module.css extension and the package doesn't process them as CSS modules during build.

However, you can use CSS modules with the components by importing the CSS file as a CSS module.

/* styles.module.css */
.searchbox-wrapper {
	background-color: #f0f0f0;
}

import "@unbxd-ui/react-search-components/styles/index.css";
import styles from "./styles.module.css";
 
<UnbxdSearchCSRWrapper>
	<SearchBox styles={{ root: styles.searchboxWrapper }} />
</UnbxdSearchCSRWrapper>;

5. How do I override default component styles?

You can override the default styles of the components in two ways:

1. Using the styles prop:

Each ready-to-use component from the SDK has a styles prop that can be used to override the default styles of the component.

import "@unbxd-ui/react-search-components/styles/index.css";
import "./styles.css"; // Import your custom styles
 
<UnbxdSearchCSRWrapper>
	<SearchBox styles={{ root: "searchbox-wrapper" }} />
</UnbxdSearchCSRWrapper>;

2. Using the same class name as the default styles with increased specificity:

If you want to override the default styles of the component, you can use the same class name as the default styles with increased specificity. This ensures that your styles take precedence over the default styles.

6. Why are styles conflicting with my existing CSS?

There are various reasons why styles might be conflicting with your existing CSS:

1. Class Name conflicts: The SDK uses class names to style the components. If you have a class name that is already in use in your existing CSS, it might conflict with the class names used by the SDK.

2. Specificity issues: CSS specificity is a mechanism that determines which styles take precedence when multiple styles apply to the same element. If your custom styles have lower specificity than the default styles, they won't override them.

3. Loading order issues: If you have multiple CSS files loaded, the order in which they are loaded can affect which styles take precedence. The SDK's styles should be loaded before your custom styles.

// Load SDK styles first
import "@unbxd-ui/react-search-components/styles/index.css";
// Then load your custom styles
import "./your-styles.css";

4. Not importing your custom styles as CSS modules: If you are using CSS modules, you need to import your custom styles as CSS modules.

import styles from "./your-styles.module.css";
 
<SearchBox
	styles={{
		root: styles.searchbox,
	}}
/>;

Customisation

1. How do I customise component themes and colours?

The React Search SDK allows you to customise the themes and colours of the components. You can do this by making use of the styles prop.

import { SearchBox } from "@unbxd-ui/react-search-components";
import "@unbxd-ui/react-search-components/styles/index.css";
 
<SearchBox styles={{ root: "searchbox-wrapper" }} />;

2. Can I use CSS-in-JS libraries with the components?

Yes, you can use CSS-in-JS libraries with the components.

For example:

// ✅ Recommended approach
// styles.css.ts
import { style } from "@vanilla-extract/css";
 
export const button = style({
	backgroundColor: "green",
	color: "white",
	padding: "10px",
});
 
// App.tsx
import { button } from "./styles.css.ts";
import { SearchBox } from "@unbxd-ui/react-search-components";
 
export default () => <SearchBox styles={{ button }} />;

Best Practices:

1. Prefer Static Extraction:

Use solutions that extract CSS at build time (like Vanilla Extract).
Avoids runtime style injection.
Better performance and SSR.

2. Component-Level Styles:

// Organize styles by component
const styles = {
	searchBox: {
		button: button,
		input: input,
		// other searchBox-specific styles
	},
};

How do I make components responsive?

Using Built-in CSS Classes and Media Queries:

/* styles.css */
/* Mobile View (up to 767px) */
@media screen and (max-width: 767px) {
	.unbxd-grid-products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
 
	.unbxd-facet-header {
		display: none;
	}
}
 
/* Tablet View (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.unbxd-grid-products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

2. Component-Specific Customization:

You can style the components based on certain conditions by making use of the styles prop.

// ProductsComponent.tsx
import { Products } from "@unbxd-ui/react-search-components";
 
function ProductsGrid() {
	return (
		<Products
			// Responsive grid layout
			styles={{
				wrapper: window.innerWidth < 768 ? "product-container" : "product-container-desktop",
				loader: window.innerWidth < 768 ? "product-loader" : "product-loader-desktop",
			}}
		/>
	);
}

Server Side Rendering UnbxdSearchCSRWrapper