React Material-UI中如何为元素同时添加自定义样式类与普通静态类名

• 你在字符串内部写{{classes.btncolor}}的写法不符合JSX语法规则，引号内的内容会被当作普通字符串处理，不会解析为变量
• 你没有在组件内部调用useStyles()生成可用的样式类名对象

1. 首先在你的函数组件内部调用useStyles获取classes实例：

// 组件内代码
const YourComponent = () => {
  const classes = useStyles() // 必须添加该行生成样式实例
  // 其他组件逻辑
  return (
    // 你的组件内容
  )
}

2. 正确拼接多类名，两种常用写法可选：

写法1：原生模板字符串拼接（无需额外依赖） #

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

核心逻辑是把整个className的值放在{}包裹的JS表达式区域，用模板字符串拼接固定类名和动态生成的Material UI自定义类名。

写法2：用classnames工具库拼接（适合多类名需要条件判断的场景） #

如果需要根据条件切换类名更方便，可以先安装classnames库，之后写法如下：

import cx from 'classnames'

// 组件内使用
<span className={cx('btn-pause', 'btn', classes.btncolor)}>
  <i className="fa fa-pause"></i>
</span>

如果修改后原有类的背景色优先级更高覆盖了自定义样式，可以在样式定义里提权：

const styles = {
   btncolor:{
      backgroundColor:"#0E122D !important"
   }
}

内容的提问来源于stack exchange，提问作者whitebear