使用Material-ui和Radium的多个样式的问题

Question

我正在尝试将Radium和Material-ui结合起来.当我尝试在单个Material-ui组件上应用多个样式时,不应用任何样式.因此,例如,类似这样的东西不会产生样式:

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

当然,如果我这样做:

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

有用.有没有办法绕过它或者这是使用Radium组合Material-ui组件样式的唯一方法？而且,只需提及,Radium已正确设置,因为在例如DIV元素上应用样式数组或正常工作.此外,我对任何有关使用Material-ui库的React项目样式的建议持开放态度.谢谢!

Answer 1

它使用 JSX spread ( ...) 运算符，这是更好的语法：

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

styleTwo: {
  background: 'green'
},

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

请注意对象的顺序确实很重要，就像在Object.assign.

我们不应该忘记这MenuItem不是一个 DOM 元素，所以当我们应用style它时，material-ui在将它应用到底层元素之前对其进行操作，这可能就是使用数组不起作用的原因。