Material UI css 加载顺序答案

【问题标题】：Material UI css load orderMaterial UI css 加载顺序
【发布时间】：2019-05-20 23:32:40
【问题描述】：

我很难理解我应该如何构建我的项目。我正在使用材质 UI 和 css 模块做出反应。问题是天知道为什么，来自 MUI 的所有样式都加载到标题的底部，与 css 模块样式相同。经过一番研究，我找到了两种解决方案：

在 css 模块中使用 !important 太糟糕了。
更改注入顺序https://material-ui.com/guides/interoperability/#css-modules

第二个问题是，在多组件项目中，每次引入新组件时都必须像示例中那样手动加载它，这将是可怕的乏味。我错过了一些明显的东西吗？您对如何更轻松地更改加载顺序有任何想法吗？

【问题讨论】：

【解决方案1】：

根据Material-UI documentation，您应该添加一个<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 样式标签将首先注入头部（优先级较低）

【讨论】：

【解决方案2】：

我认为您可能误解了示例中的某些内容。您无需针对每个组件执行任何操作来更改加载顺序。步骤如下：

1。在您的 index.html 中，将  之类的注释添加到您希望插入 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 起点，因此依赖关系更简单。

【讨论】：

我遇到了同样的问题。我按照你上面提到的方法做了。即使我的 CSS 注入顺序是完美的，我仍然需要使用 !important 来覆盖材质 ui 样式。有什么办法可以避免！important
@M14 使用相关代码创建一个单独的问题（最好使用重现问题的 CodeSandbox）并引用此问题并准确指出哪些问题没有按预期工作。
@M14 您应该能够使用我的 CodeSandbox 从这个问题作为创建问题的简单重现的起点。
如果你使用的是自定义的Head组件，可以将第一步实现为：<div dangerouslySetInnerHTML={{ __html: ``, }} />