如何使用 classes 道具在 Material UI 中添加多个类？

Question

使用 css-in-js 方法向一个react组件添加类，如何添加多个组件？

这是类变量：

 const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  spacious: {
    padding: 10
  },
});

这是我使用它的方式：

 return (<div className={ this.props.classes.container }>)

以上工作，但有没有办法添加两个类，而不使用 classNames npm 包？就像是：

 <div className={ this.props.classes.container + this.props.classes.spacious}>

原文由 q3e 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用字符串插值：

 <div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

原文由 klugjo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以使用 clsx 。我注意到它在 MUI 按钮示例 中使用

首先安装它：

npm install --save clsx

然后将其导入到您的组件文件中：

import clsx from 'clsx';

然后在您的组件中使用导入的函数：

<div className={ clsx(classes.container, classes.spacious)}>

原文由 Razzlero 发布，翻译遵循 CC BY-SA 4.0 许可协议