1

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;
';
KalleVu
  • 23
  • 5

1 Answers1

1

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.

Kuldeep Saxena
  • 1,803
  • 1
  • 14
  • 17
  • I accept the answer, although I see this as limitation in Reactivesearch. Many UI libraries come with sane defaults, but they provide easy option to either modify the global styles (e.g. Bootstrap brand-color variable) or opt-out the components. – KalleVu Nov 07 '18 at 11:54
  • This is quite a big problem in my opinion. For example when using datasearch, one will have styles like height=42px for the input. Which is almost impossible to override with something like Bootstrap since we do not know the class name generated by Reactiveseacrh. – user1525612 Oct 09 '19 at 22:36