如何使用伪选择器修改React Look（内联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中的某些内容似乎不太合适。

思想？