reactivesearch

Override or remove inline styles in Reactivesearch v2


I'm using ReactiveList to render results. What whould be the best way to override default inline-styles? Optimally remove all default styles provided by Reactivesearch (2.13.0).

E.g. How to remove these default styles provided by sortOptions in /packages/web/src/styles/result.js:

const sortOptions = css'
  color: #424242;
  height: 32px;
  font-size: 0.82rem;
  padding: 0 25px 0 10px;
  background: url(base64....) no-repeat 95% 50%;
  background-color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 0;
  outline: 1px solid #ddd;
  outline-offset: -1px;
';

Solution

  • I think, inner classes are the only way to merge the styling for now. In your case the innerClass name will be sortOptions.

    Please check the docs https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html#styles

    The other alternative to use custom renderer, we can have render functions for every little component.

    Every UI library comes with some default styling, the goal is to reuse the components with minimum efforts i.e one can easily extend & override the existing styles.

    If you want the complete control over your UI components, I'll suggest custom render functions rather than the innerClass.