ReactiveSearch components can also be styled using inline-styles. Each component supports a style
prop which accepts an object. Find more info on the react docs.
Note
Using the
style
attribute as the primary means of styling elements is generally not recommended. ReactiveSearch components also supportclassName
prop allowing you to style them using CSS classes.
Usage
You can pass the style object via the style
prop like:
{
"backgroundColor": "coral",
"color": "black"
}
Alternatively, you can also add a className
to any component which gets applied to the component at the root level. You may also inject className
to the inner levels using the innerClass
prop. You can read more about it in the next section.
Examples
Using the style prop
SearchBox
...
style={{ border: '1px dashed coral', backgroundColor: '#fefefe' }}/>
Using the className prop
SearchBox
...
className="search-box"/>