Styling the label of a checkbox when it is checked with Radium

Question

I have a simple React js project.

App.js

import React from 'react';
import Radium, { StyleRoot } from 'radium';
import Checkbox from './Checkbox';

function App() {
  // style
  const style = {
    ':hover': {
      color: 'red',
      backgroundColor: 'blue'
    },
    ':focus': {
      color: 'orange'
    }
  };

  return (
    <div className="App">
      <p>Hovering on the button should change its color to red and background color to blue.</p>
      <p>Pressing it makes the text orange.</p>
      <p>Pesudo-element like :hover is not possible unless we use radium.</p>
      <button style={style}>Hover me</button>
      <Checkbox />
    </div>
  );
}

export default Radium(App);

Checkbox.js

import React from 'react';
import Radium from 'radium';

const checkBox = props => {
    const style = {
        '+ label': {
          color: '#ccc'
        }, 
        ':checked + label': {
          color: '#f00'
        } 
    };

    return (
        <div>
            <input type="checkbox" id="ossm" name="ossm" style={style} /> 
            <label for="ossm">CSS is Awesome</label> 
        </div>
    );
};

export default Radium(checkBox);

Firstly, I'm trying to style a checkbox so that:

• its label has color of #ccc and
• when it is checked, change the color of its label to #f00.

Styling is not applied. How to fix it?

Secondly, inside of App.js in what circumstances do I wrap JSX code with <StyleRoot></StyleRoot>?

Thanks a bunch!

Answer 1

Maintain a state and conditionally apply the style.

Working demo

Like this

const checkBox = props => {
  const [checked, setChecked] = useState(false);

  const style = {
    input: { fontSize: 20, padding: "20px" },
    base: { background: checked ? "red" : "blue", fontSize: 20 },
    "+ label": {
      color: "#ccc"
    },
    ":checked + label": {
      color: "#f00"
    }
  };

  return (
    <div>
      <input
        checked={checked}
        onChange={() => setChecked(prev => !prev)}
        type="checkbox"
        id="ossm"
        name="ossm"
        style={style.input}
      />
      <label style={style.base} for="ossm">
        CSS is Awesome
      </label>
    </div>
  );
};

const Checkbox = Radium(checkBox);

Answer 2

Radium doesn't support :checked.

https://github.com/FormidableLabs/radium/issues/210