使用Radium检查复选框的标签的样式

Question

我有一个简单的React项目。

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);

首先，我试图设置一个复选框，以便：

• 其标签颜色为#ccc和
• 选中它时，将其标签的颜色更改为#f00。

不应用样式设计。怎么修呢？

其次，在App.js内部，在什么情况下我用<StyleRoot></StyleRoot>包装JSX代码？

谢谢一堆人！

Answer 1

保持状态并有条件地应用样式。

工作演示

像这样的

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

镭不支持:checked。

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