Material-ui 및 Radium에서 여러 스타일 사용 관련 문제

Question

Radium과 Material-ui를 결합하려고합니다. 하나의 Material-UI 구성 요소에 여러 스타일을 적용하려고하면 스타일이 적용되지 않습니다. 작동

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

: 내가 좋아하는 뭔가를 할 경우, 물론

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

: 그래서, 예를 들어,이 같은 일이 적용된 스타일을 생산하지 않습니다. 주위에 어떤 방법이 있습니까? 아니면 Material-UI 구성 요소의 스타일을 결합하기 위해 Radium을 사용하는 유일한 방법입니까? 그리고 말하자면, Radium은 적절하게 설정됩니다. 예를 들어 DIV 요소에 스타일 배열을 적용하거나 제대로 작동하기 때문입니다. 또한 Material-ui 라이브러리를 사용하는 React 프로젝트의 스타일링에 대한 제안은 열려 있습니다. 감사!

Answer 1

체크 아웃이 바이올린 : https://jsfiddle.net/Lxh5x2qr/

는 그것은 JSX 확산 조금 더 좋은 구문입니다 (...) 연산자를 사용합니다 :

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

styleTwo: { 
    background: 'green' 
}, 

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

주의하세요 객체의 순서는 중요,처럼 수행 Object.assign.

우리는 MenuItem는 DOM 요소 아니라는 것을 잊지 말아야한다, 그래서 우리는 그것을 style를 적용 할 때, material-ui이 기본 요소에 적용하기 전에 정보를 조작, 아마이 작동하지 않는 배열을 사용하는 이유입니다.