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 support className prop allowing you to style them using CSS classes.

Usage

You can pass the style object via the style prop like:

Copy 
{
	"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

Copy 
<DataSearch
    ...
    style={{        border: '1px dashed coral',        backgroundColor: '#fefefe'    }}/>

Using the className prop

Copy 
<DataSearch
    ...
    className="search-box"/>