...
In our example below we have font-family: ‘Raleway'Raleway', sans-serif;
applied to the document’s <body>
element.
When we trigger the overlay (note that we are using the overlay integration for this example!) we can see that the widget has incorporated the font-family into the design:
...
However, you will find that the rest of the styles in the search UI are fixed. Here are a few ways to override the styles:
...
This single line of code will completely remove all the default styles that come with the Search UI Widgets. The line can be added to all available widgets and is a great way to start your styling out from a blank slate:
...
2. Apply custom changes to single elements
...
There we go, the font is now much bolder!
...
https://codesandbox.io/embed/jovial-oskar-of877d?fontsize=14&hidenavigation=1&theme=dark
3. Keep the default styling when styles conflict
...