将多种样式与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

对于react中的material-ui组件，我们使用className添加样式。如果我必须在一个材质组件中添加多个样式，那么下面是方法：

示例1：

<div className={`${style1} ${style2}`}>

示例2：

import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />

特别针对您的情况(Radium)：它所做的是将两个对象(style1和style2)合并到一个新的匿名object {}中，这就是您需要做的。

但是，在执行此操作时要小心，因为如果两个对象定义了相同的键，则需要考虑如何合并。例如，如果style1和style2都定义了一个高度，您应该使用哪一个？

在这个堆栈溢出线程http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically上有一长串可能的方法，这取决于您正在使用的库和您的用例，每种方法都有自己的优缺点。

Answer 2

您还可以使用Material UI附带的clsx模块来组合您的样式类，而不是添加类名。

{/* using arrays */}
<MyComponent classes={clsx([classes.text, classes.title])} />
{/* using conditions */}
<div className={clsx(classes.root, {
  [classes.base]: true,
  [classes.closed]: !open,
  [classes.open]: open
})]>
  {props.children}
</div>

Material UI Mini Variant Drawer示例很好地展示了这个模块。

Answer 3

看看这把小提琴：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会在将它应用到底层元素之前操作它，这可能就是使用数组不起作用的原因。