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

只需使用 StylesProvider injectFirst 的组件属性(property):

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属性(property):

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