Styling
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
Loading...
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
Loading...
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.