我很难理解我应该如何构建我的项目。我正在使用材质 UI 和 css module进行react。问题是天知道为什么，来自 MUI 的所有样式都在标题的底部加载，与 css module样式相同。经过一番研究，我找到了两个解决方案：
第二个问题是，在多组件项目中，每次引入新组件时都必须像示例中那样手动加载它，这将是非常乏味的。我错过了一些明显的东西吗？您对如何更轻松地更改加载顺序有任何想法吗？
根据Material-UI 文档，您应该添加一个<StylesProvider/>组件，该组件包装您的组件树。
import { StylesProvider } from '@material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Styled components can override Material-UI's styles. */}
</StylesProvider>
如果injectFirst设置（true当然），Material UI 样式标签将首先注入头部（优先级较低）
我认为您可能误解了示例中的某些内容。您无需针对每个组件执行任何操作即可更改加载顺序。步骤如下：
1. 在您index.html希望<!-- jss-insertion-point -->插入 jss CSS 的头部添加一条注释。
2. 在您的index.js（或在您的渲染层次结构顶部或附近的某处）创建 jss 配置以指示插入点注释的名称：
import JssProvider from "react-jss/lib/JssProvider";
import { create } from "jss";
import { jssPreset } from "@material-ui/core/styles";
const jss = create({
...jssPreset(),
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
insertionPoint: "jss-insertion-point"
});
3. 将您的顶级元素包装在 中JssProvider以使用这些配置（没有特定于组件的步骤）：
function App() {
return (
<JssProvider jss={jss}>
<div className="App">
<Button>Material-UI</Button>
<Button className={styles.button}>CSS Modules</Button>
</div>
</JssProvider>
);
}
我已经创建了一个类似于 Material-UI 文档中提到的 CodeSandbox，除了这个使用 create-react-app 起点，所以依赖关系更简单。
