我可以在 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

在我最近的项目中，我做了

import './style.css';

这是 style.css

的示例内容

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

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

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

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

Answer 2

是的，你可以。

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

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

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

This 说明如何执行此操作。

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

Answer 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 属性：

By default, the styles are injected last in the element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material-UI's styles, set this prop.

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

Can I override Material-UI with css modules in create-react-app v2?

reactjs

material-ui

css-modules