时间戳

首页 > 解决方案 > Material UI css 加载顺序

reactjs - Material UI css 加载顺序

问题描述

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

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

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

标签： reactjsmaterial-ui

解决方案

根据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 样式标签将首先注入头部（优先级较低）

推荐阅读