应用于类的资料UI v5样式不适用吗？

Question

我正在尝试设计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>
  );
}

Answer 1

问题是材料UI风格的注入顺序。自定义样式确实适用，但是Mui样式是在定制样式之前注入的，因此在这种情况下没有效果。

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

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

Answer 2

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

App.module.css

然后像这样进口

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

然后你可以像这样使用它

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

在Nextjs中，您可以将所有内容都抛到styles.css中以使其具有全局性，但我不知道这是否也是为了响应。