我正在尝试结合 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 项目设置样式的建议。谢谢！
【问题讨论】：
标签： javascript reactjs material-ui radium
对于 react 中的 material-ui 组件，我们使用 className 添加样式。如果我必须在一个材质组件中添加多个样式，那么下面是方法：
示例 1：
<div className={`${style1} ${style2}`}>
示例 2：
import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />
专门针对您的情况（镭）：
它所做的是将 2 个对象（样式 1 和样式 2）合并到一个新的匿名 object {} 中，这是您需要做的。
您在执行此操作时需要小心，因为如果两个对象定义相同的键，例如，您需要考虑如何合并。如果 style1 和 style2 都定义了一个高度，你使用哪个？
在此 stackoverflow 线程 http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically 上有很长的可能方法列表，具体取决于您使用的库和您的用例，它们各有优缺点。
【讨论】：
除了添加类名，您还可以使用 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 示例很好地展示了这个模块。
【讨论】：
看看这个小提琴：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在将其应用于底层元素之前对其进行了操作，这可能就是使用数组的原因不工作。
【讨论】：