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)} />

专门针对您的情况（半径）：它正在做的是将2个对象（style1和style2）合并到新的匿名object {}中，这是您需要做的。

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

在这个stackoverflow线程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 spread（...）运算符，这是一种更好的语法：

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

styleTwo: {
  background: 'green'
},

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

请注意对象的顺序很重要，就像在Object.assign中一样。

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

使用Material-ui和Radium

3 个答案: