Problem mit mehreren Stilen mit Material-ui und Radium

Question

Ich versuche, Radium und Material-ui zu kombinieren. Wenn ich versuche, mehrere Stile auf eine einzelne Material-ui-Komponente anzuwenden, wird kein Stil angewendet. So zum Beispiel so etwas wie dies erzeugt keine Styling angewandt:

<MenuItem 
    style={[styles.styleOne, styles.styleTwo]} 
    > 

Natürlich, wenn ich etwas tun:

<MenuItem 
    style={Object.assign({}, styles.styleOne, styles.styleTwo)} 
    > 

es funktioniert. Gibt es einen Weg dahin oder ist dies der einzige Weg, Radium zu verwenden, um Stile für eine Material-ui-Komponente zu kombinieren? Und um nur zu erwähnen, Radium ist richtig eingerichtet, weil das Anwenden von Array von Stilen auf zum Beispiel DIV-Element oder funktioniert ordnungsgemäß. Ich bin auch offen für jeden Vorschlag über das Design eines React-Projekts, das die Material-ui-Bibliothek verwendet. Vielen Dank!

Answer 1

Schauen Sie sich diese Geige: https://jsfiddle.net/Lxh5x2qr/

Es nutzt die JSX Ausbreitung (...) Operator, der ein bisschen schöne Syntax:

styleOne: { 
    background: 'blue', 
    color: 'red' 
}, 

styleTwo: { 
    background: 'green' 
}, 

... style={{...this.styleOne, ...this.styleTwo}} ... 

Bitte beachten Sie die die Reihenfolge des Objekts nicht egal, wie in Object.assign.

Wir sollten nicht vergessen, dass MenuItem kein DOM-Element ist, so dass, wenn wir style darauf anwenden, material-ui manipuliert es, bevor es auf das zugrunde liegende Element aufbringt und wahrscheinlich dies ist der Grund, warum funktioniert das mit einem Array nicht.