Styling a checked + in React JS environment

Question

I'm trying to style the below type of styles in a React.js but I have no idea to change color according to react variable. The code is as follows:

CSS:

.toggle input:checked + .slider {
  background-color: ${color};
}

React:

const { color } = userDoc.data()

return(
            <div className="toggle">
              <label className="switch">
                <input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
                <span className="slider round"></span>
              </label>
            </div>
)

This might help you: https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css, it's not related to react.js or not env, you are still modifying the css file to get the desired output. — Nicolae Maties, Jun 08 '20 at 09:13

score 1 · Accepted Answer · answered Jun 08 '20 at 10:44

You could add an inline style if you want to style the span element.

const { color } = userDoc.data()

// create a custom style
const customStyle = { backgroundColor: color }

return(
            <div className="toggle">
              <label className="switch">
                <input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
                <!-- add it here -->
                <span className="slider round" style={style}></span>
              </label>
            </div>
)

Styling a checked + in React JS environment

1 Answers1