我可以在 create-react-app v2 中使用 css 模块覆盖 Material-UI 吗？答案

【问题标题】：Can I override Material-UI with css modules in create-react-app v2?我可以在 create-react-app v2 中使用 css 模块覆盖 Material-UI 吗？
【发布时间】：2019-04-03 14:15:21
【问题描述】：

例如我想给这个按钮添加margin-top

import classes from 'button.module.css';
        <Button 
          type="submit"
          variant="contained"
          color="primary"
          fullWidth
          disabled={this.props.isLoading}
          className={classes.Button}
        >
          {this.props.isLoading ? <CircularProgress size={20}/> : 'SIGN IN'}
        </Button>

在 button.module.css 文件中

.Button {
  margin-top: 15px;
}

是否可以使用这种方法而不是覆盖官方材料-ui页面中的指令？

【问题讨论】：

标签： reactjs material-ui css-modules

【解决方案1】：

在我最近的项目中，我做了类似的事情

import './style.css';

这是 style.css 的示例内容

.detailbox-paper {
  width: 90vw;
  margin: 20px auto 0px auto;
}

我通过在这样的元素上使用 className 来使用它 <Paper className="detailbox-paper"> 它奏效了。通过这种方法要记住的一件事是，您将开始与之抗争的 css 特异性。

您还可以将内联styles={{}} 与camelCase 语法一起用于属性。但是，据我所知，总是会设置内联样式，除了 !important 关键字。

希望这对您的旅程有所帮助。

【讨论】：

是的，我使用了内联样式并且它有效。我也可以用外部 css 覆盖组件，但不知何故 Button 组件不应用我的样式
这是一个 css 特异性问题，你需要更高的权重或重要。如果你还不知道的话，看看smashingmagazine.com/2007/07/… ;-)
添加 !important 后一切正常。非常感谢，我完全忘记了具体的问题。你的回答真的很有帮助 XD
如果您在特异性方面遇到问题，请查看material-ui.com/customization/overrides/…下方的“内部状态”部分
是的，这确实有效，但您应该知道，这种方法创建的是全局样式，而不是局部范围的样式（CSS 模块）

【解决方案2】：

是的，你可以。

像平常使用 CRA 一样使用 className。

This 将解释如何使用 CSS 模块。这很简单。

但是，在完成上述操作后，我遇到了一个问题，即我的 CSS 被 MaterialUI CSS 覆盖。所以我们需要改变Styleinjection的顺序。

This 解释了如何做到这一点。

Here 是一个带有工作示例的沙盒。

【讨论】：

沙箱不再适用于 MUI 5.0，v5 解决方案：github.com/mui-org/material-ui/issues/24109

【解决方案3】：

只需将StylesProvider 组件与injectFirst 属性一起使用：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { StylesProvider } from "@material-ui/core/styles" // <-- import this component, and wrap your App.

ReactDOM.render(
    <StylesProvider injectFirst>
        <App />
    </StylesProvider>,
    document.getElementById('root')
)

这是 CSS 特异性的问题，您的 CSS 在 Material UI 的样式之前加载，因此会被它们覆盖。如docs 中所述，关于injectFirst 属性：

默认情况下，样式最后注入到页。结果，它们比任何其他风格都获得了更多的特异性床单。如果要覆盖 Material-UI 的样式，请设置此属性。

【讨论】：