Problem z używaniem wielu stylów z Materiał-ui i Radem

Question

Próbuję połączyć Rad i Material-ui. Gdy próbuję zastosować wiele stylów na pojedynczym komponencie Material-ui, styl nie jest stosowany. Tak więc, na przykład, coś takiego nie wytwarza stylizacji zastosowanego:

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

oczywiście, jeśli zrobię coś takiego:

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

to działa. Czy jest jakiś sposób obejścia tego, czy jest to jedyny sposób użycia Radu do łączenia stylów dla komponentu Material-ui? I wystarczy wspomnieć, że Radium jest poprawnie skonfigurowany, ponieważ stosuje tablicę stylów na przykład na elemencie DIV lub działa poprawnie. Jestem również otwarty na wszelkie sugestie dotyczące stylizowania projektu React, który wykorzystuje bibliotekę Material-ui. Dzięki!

Answer 1

Sprawdź ten skrzypce: https://jsfiddle.net/Lxh5x2qr/

Wykorzystuje rozprzestrzenianiu JSX (...) operatora, który jest nieco ładniejszy składnia:

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

styleTwo: { 
    background: 'green' 
}, 

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

Zwróć uwagę na kolejność obiektu ma znaczenia, podobnie jak w Object.assign.

Nie należy zapominać, że MenuItem nie jest elementem DOM, więc gdy stosujemy style do niego material-ui manipuluje ją przed zastosowaniem go do elementu bazowego, a prawdopodobnie jest to powód, dlaczego za pomocą tablicy nie działa.