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

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

是否可以使用此方法代替官方材料用户界面页面中的说明进行覆盖？

Answer 1

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

import './style.css';

这是style.css的示例内容

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

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

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

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

Answer 2

是的你可以。

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

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

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

这说明了如何执行此操作。

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