React SDK


This document outlines how to control the styling of the the React components in the @sajari/react-search-ui package.

You have several options for styling which can also be combined if required:

Or if you want complete control of rendering and styling, you should use the @sajari/react-hooks package with your own components.

Set basic color options

You can set basic color options via the theme prop on the SearchProvider. Currently this is only for the primary actions but we will add more soon.

Editable Example


Disabling the default styling

To disable the default styles provided by the package, add the disableDefaultStyles to your SearchProvider.

Adding custom classNames

It's possible to add classnames to components via the customClassNames prop on SearchProvider.

Editable Example


Available classNames

!important Styles

It's also possible to add !important to the provided styles by adding the importantStyles prop on the SearchProvider. This can often override any CSS clashes that usually result in strange styling.