How pass React prop to CSS

Question

I have a problem - I don't know how to change checkbox color using a color value from props. My idea was to give it via style attribute but I don't know how to toggle this. I'm using rc-switch and I want to change his background depending on Switch state. I have something like this now

<Switch style={{ backgroundColor: mainColor }}/>

but it set this color for both states and I want this swich to become 'defaultColor' when is in off position.

Answer 1

There is no style prop on the Switch Component, but there is a className prop, which you can use to add your custom class.

If you are using sass:

.mySwitch {
  &-black {
    background-color: black;
  }

  &-yellow {
    background-color: yellow;
  }
}

Then programatically switch the class.

<Switch className={`mySwitch-${color}` ... />

Could be an option, I think.