Question

例如，我想在此按钮上添加页边空白

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;
}

我在这样的元素上使用className消耗了它 <Paper className="detailbox-paper"> 而且有效。这种方法要记住的一件事是您要开始使用的CSS特异性。

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

希望这对您的旅途有帮助。

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样式之前加载，因此被它们覆盖。如docs中所述，关于injectFirst属性：

默认情况下，样式会最后插入的元素中页。结果，它们比其他任何样式都更具特异性片。如果要覆盖Material-UI的样式，请设置此属性。

Answer 3

是的，可以。

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

This将说明如何使用CSS模块。这很简单。

但是，做完上述事情之后，我遇到了CSS被MaterialUI CSS覆盖的问题。因此，我们需要更改Styleinjection的顺序。

This解释了如何执行此操作。

Here是一个包含示例的沙盒。

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

3 个答案: