重大的UI CSS加载顺序

Question

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

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

第二个问题是，在多组件项目中这将是一个可怕的麻烦，在每次引入新组件时，您都必须手动加载该组件，如示例中所示。我是否缺少明显的东西？您有什么想法可以更轻松地更改加载顺序吗？

Answer 1

根据Material-UI documentation，您应该添加一个rename_all(select(d, starts_with("a"))/select(d, -starts_with("a")), ~ paste("c", 1:(ncol(d)/2), sep = "_")) c_1 c_2 c_3 1 33.33333 86.95652 73.52941 2 160.00000 50.00000 66.66667 组件，该组件包装了组件树。

<StylesProvider/>

如果设置了import { StylesProvider } from '@material-ui/core/styles'; <StylesProvider injectFirst> {/* Your component tree. Styled components can override Material-UI's styles. */} </StylesProvider> （当然也设置了injectFirst），那么Material UI样式标签将首先注入头部（优先级较低）

Answer 2

我认为您可能会对示例产生误解。您无需针对每个组件执行任何操作来更改加载顺序。 步骤如下：

1。在您的index.html中，向您想要插入jss CSS的头部添加<!-- jss-insertion-point -->之类的注释。

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起点，因此依赖项更加简单。