0

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?

jaybee
  • 2,240
  • 14
  • 20
Detuned
  • 3,652
  • 4
  • 27
  • 54

1 Answers1

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>
xyc
  • 151
  • 1
  • 6
  • This doesn't work, as I mentioned, since you need to hover over the label element to have the styling applied. – Detuned Jun 21 '16 at 01:48
  • I see. see here: https://github.com/FormidableLabs/radium/issues/105. I've updated the fiddle link. – xyc Jun 21 '16 at 01:57
  • I've seen this, however, I couldn't get it to work with my example. Any tips? – Detuned Jun 21 '16 at 01:59