7

我正在尝试结合 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 项目设置样式的建议。谢谢！

4

3 回答 3

2

对于material-uireact 中的组件，我们使用className. 如果我必须在材质组件中添加多种样式，那么以下是方法：

示例 1：

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

示例 2：

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

特别针对您的情况（Radium）：它正在做的是将 2 个对象（样式 1 和样式 2）合并为一个新的匿名对象object {}，这是您需要做的。

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

在这个 stackoverflow 线程http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically上，有很多可能的方法来执行此操作，具体取决于您的库'正在使用和您的用例，它们各有优缺点。

于 2019-10-31T10:51:35.270 回答
1

除了添加类名，您还可以使用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示例很好地展示了这个模块。

于 2020-04-29T23:56:58.047 回答
-1

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

于 2016-06-15T08:08:05.183 回答