React classname dynamically change selector css value dynamically?

Question

css

You need to change the color value but it's important that it be a selector to override other css and to apply this to all nested components.
The selector is like this:
s1.s1.s3 * {
color: green;
}
But you need to do it dynamically, so that the color changes according to the parameter, that is, you need to somehow select this selector in the code and edit the color value in it. Can this be done somehow without radium? Some native ways, or are there some other ways? I'm using scss *
I have a color selector, i.e. I move the slider and the color changes, I can't create many classes for each color. I need to insert a variable* And it's important that the selector be exactly like this,
also I can't use the style property. because this selector is needed
This is a colorpicker, I can't create classes with styles for all colors *

Answer 1

Add your color prefix to className / or pass the desired property to the style tag.

variable = this.state.color // например 's4'
...
<div className={'s1 s2 s3 ' + variable}> // не забывайте пробел после s3
...

For each color change in the state, write a new class value, the react itself will cause a re-render and you will get what you need.

Answer 2

vanseodesign.com/css/custom-properties-and-javascript