应用于类的 Material UI v5 样式不适用？答案

【问题标题】：Material UI v5 styles applied to class does'nt apply?应用于类的 Material UI v5 样式不适用？
【发布时间】：2022-02-11 21:25:39
【问题描述】：

我正在尝试设置 MUI 滑块的样式，因此我决定使用 className 属性设置它的样式。但是应用于主类的样式不会被应用，而其他样式（如“悬停”状态）会被应用。如果我删除所有类并使用 SX 属性对其进行样式设置，一切正常。但我想将样式单独保存到外部 css 文件中。

下面是我的代码：

App.css

.container{
  margin-left: 30%;
  margin-top: 20%;

}

/* This does'nt get applied */
.slider {
  color: #ff0000;
  width: 300px;
}


.slider:hover {
  color: #2e8b57;
}

.slider > .MuiSlider-thumb {
  border-radius: 1px;
}

App.js

import "./App.css"
import * as React from 'react';
import Slider from '@mui/material/Slider';

export default function App() {
  return (
    <div className="container">
      <Slider className="slider"  defaultValue={30} />
    </div>
  );
}

【问题讨论】：

你能创建一个codesandbox吗？

标签： javascript html css reactjs material-ui

【解决方案1】：

问题在于 Material UI 样式的注入顺序。自定义样式确实适用，但 Mui 样式是在自定义样式之前注入的，因此在这种情况下它们不起作用。

本指南解释了如何更改注射顺序：

https://mui.com/guides/interoperability/#css-injection-order

【讨论】：

【解决方案2】：

我不知道是否需要，但我使用css模块和material-ui。您可以将您的 css 文件重命名为

App.module.css

然后像这样导入

import styles from "./App.module.css"

你可以像这样使用它

<Slider className={styles.slider}  defaultValue={30} />

在 Nextjs 中，您可以将所有内容放入 styles.css 以使其全局化，但我不知道这是否也适用于 react。

【讨论】：