如何使用伪选择器修改 Radium 中的嵌套元素（或内联 CSS）？

Question

我有一个包含嵌套元素的组件（例如 Button）。我想在您交互时修改嵌套元素 (hover/active/...)

const defaultStyles = {
  button: {
    backgroundColor: 'black',
    ':active': {
      backgroundColor: 'white',
      // in css you'd be able to nest this functionality
      label: {
        color: 'red'
      }
    }
  },
  label: {
    color: 'white'
  }
};

class Button extends React.Component {
  render() {
    return (
      <button
        type={isSubmit ? 'submit' : 'button'}
        key="block_button"
        style={defaultStyles.button}
        onClick={onClick}>
        <span style={defaultStyles.label}>{label}</span>
      </button>
    );
  }
}

当您将鼠标悬停在按钮上时，我无法更改标签。我尝试添加使用 [defaultStyles.label] 而不是标签等来评估密钥。但是，在 CSS 中非常简单的东西在这里似乎不起作用。

想法？

Answer 1

参见this fiddle。

const defaultStyles = {
  button: {
    backgroundColor: 'black',
    ':hover': {
      backgroundColor: 'white',
    }
  },
}

// label
<span style={Radium.getState(this.state, 'block_button', ':hover') ? {color: 'red'} : {color: 'white'}}>{label}</span>

如何使用伪选择器修改 Radium 中的嵌套元素（或内联 CSS）？

How to modify nested elements in Radium (or inline CSS) with pseudo selectors?

inline-styles

reactjs

redux