Wie verschachtelte Elemente in Radium (oder Inline-CSS) mit Pseudo Selektoren ändern?

Question

Ich habe eine Komponente (z. B. Button), die ein verschachteltes Element hat. Ich möchte das verschachtelte Element ändern, wenn Sie interagieren (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> 
    ); 
    } 
} 

Ich bin nicht in der Lage, das Etikett zu bekommen zu ändern, wenn Sie über die Schaltfläche schweben. Ich habe versucht, das Auswerten des Schlüssels mit [defaultStyles.label] anstelle von nur Etikett usw. zu verwenden, aber etwas, das in CSS ziemlich einfach sein würde, scheint hier nicht zu funktionieren.

Gedanken?

Answer 1

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