Provide better options for styling - particularly nested elements

[jkhaui]

Affected Projects React

Is your feature request related to a problem? Please describe. This is a great library overall, so it's a shame it appears handicapped regarding fine-grained and intuitive options for styling. E.g. I need to provide inline styling to the input element of a CategorySearch component. This is so I can pass the color property as a variable based on my app's active theme (e.g. if dark mode is active, the searchbar should show white text, and vice versa). As far as I'm aware this is not possible right now. If I provide the style prop to CategorySearch, the color attribute is applied to the wrapper but does not change the text color of the input element it wraps (even when adding !important). Providing a class name is also pointless because I can't control the theme variable inside a CSS stylesheet.

Describe the solution you'd like A simple inline-styling solution for every component; not just the wrapper, but also every child element inside it.

Describe alternatives you've considered

Additional context

[jyash97]

Hey @jkhaui Thanks for reporting the issue.

You can make use of innerClass prop to update the class for child components. Here is the component usage:

<CategorySearch
     title="CategorySearch"
     dataField={["original_title", "original_title.search"]}
     categoryField="authors.raw"
     componentId="BookSensor"
     innerClass={{
       input: "category-input"
     }}
/>

Styles:

.category-input {
  color: red;
}

Codesandbox Link: https://codesandbox.io/s/wonderful-smoke-cveky

[gauthierm]

Even elements that are exposed by innerClasses are really difficult style. For example, the count in multilist rows is really difficult to style. It gets the generated CSS selector from emotion:

.css-1kol0be + label > span > span:nth-child(2) {
}

I can add a class to the count using innerClasses but it's way less specific than the class generated using the emotion themeing engine.

I end up needing to use:

.multi-list .multi-list__checkbox + .multi-list__label .multi-list__count {
}

Not only is this unwieldy, it's also inconsistent how specific each selector needs to be to override the emotion styles. This makes my styles unnecessarily complicated.

What would be preferrable is a way to just disable the generated emotion styles for all reactivesearch components.

[Rafcin]

Please don't make us use inline css... its a pain to style stuff not online. I agree with this idea of making it nicer to work with.