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

Question

例如我想给这个按钮添加 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;
}

是否可以使用此方法而不是像官方 material-ui 页面中的指令那样覆盖？

Answer 1

是的你可以。

使用className像你通常你CRA做。

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

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

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

这是一个带有工作示例的沙箱。

Answer 2

只需将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 的样式之前加载，因此被它们覆盖。正如文档中所述，关于injectFirst财产：

默认情况下，样式最后注入到页面元素中。因此，它们比任何其他样式表获得更多的特异性。如果要覆盖 Material-UI 的样式，请设置此属性。

Answer 3

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

import './style.css';

这是 style.css 的示例内容

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

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

您还可以使用内联styles={{}}属性的驼峰式语法。但是，据我所知，内联样式总是会被设置，除非有关键字!important。

希望这可以帮助您的旅程。