Customizing Styles

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.


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.


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.


Using the style prop

        border: '1px dashed coral',
        backgroundColor: '#fefefe'

Using the className prop