在 React Material-UI 上向对象添加多个样式类 [关闭]答案

【问题标题】：Add multiple styling class to object on React Material-UI [closed]在 React Material-UI 上向对象添加多个样式类 [关闭]
【发布时间】：2021-11-02 10:56:01
【问题描述】：

我有这样的 JSX：

 <span className="btn-pause btn"><i class="fa fa-pause"></i></span>

现在我想改变这个按钮的颜色：

const styles = {
   btncolor:{
      backgroundColor:"#0E122D"
   }
}
const useStyles = makeStyles(styles)

我应该如何将这种样式添加到className 与正常的其他类？

 <span className="btn-pause btn {{classes.btncolor}}"><i className="fa fa-pause"></i></span>

它不起作用。

【问题讨论】：

"btn-pause btn {{classes.btncolor}}" 只是一个字符串，字面上包含“类”{{classes.btncolor}}。您通常如何将值插入到字符串中？如果你使用className={...}，你可以使用任何你喜欢的 JavaScript 来创建合适的类。

标签： javascript reactjs material-ui

【解决方案1】：

您在引号下添加颜色变量。以下是正确答案：

<span className={`btn-pause btn ${classes.btncolor}`}>
  <i className="fa fa-pause"></i>
</span>

替代解决方案：
要管理班级分配，您可以使用库classnames。你在你的情况下使用它的方式是这样的：

import classnames from 'classnames';

....
<span className={classnames("btn-pause", "btn", classes.btncolor)>
  <i className="fa fa-pause"></i>
</span>

【讨论】：

谢谢你，我可以用这个解决方案添加类。
太棒了。很高兴我能帮上忙。