Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

...