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

Question

I have a component (e.g. Button) which has a nested element. I'd like to modify the nested element when you interact (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>
    );
  }
}

I'm unable to get the label to change when you hover over the button. I tried adding evaluating the key with [defaultStyles.label] instead of just label, etc. however, something that would be quite simple in CSS doesn't seem to work here.

Thoughts?

Answer 1

See 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>