material-ui version4.9.0中的自定义css答案

【问题标题】：Custom css in material-ui version4.9.0material-ui version4.9.0中的自定义css
【发布时间】：2020-05-10 19:10:33
【问题描述】：

我必须在我的项目中更新材料 ui 版本。我使用的版本是 0.20，现在我已经更新到 v.4.9 我已将所有导入从 material-ui 更改为 @materia-ui/core，并且我的应用程序编译成功。我遇到的问题是样式。我没有在每个组件中都使用样式，但我使用了一个全局 css 文件，我在 main.js 中导入了该文件，并且对于每个元素和组件，我都在此处添加了样式。问题是当前的 material-ui 组件样式错误。例如，我使用的芯片组件有一个类名：

.euro-chip-default {
    background-color: #FFF !important;
    border: 1px solid #E9EEF1 !important;
}

现在我已经更新了这个类名的版本，现在可以正常工作了。我的芯片看起来很棒。我必须做些什么才能在更新的材料 ui 项目中使用 css。从文档中我找不到解决方案。他们使用我不能使用的 withStyles，因为我的组件会变得很大谢谢！

【问题讨论】：

我使用全局主题来对我的组件进行全局主题化，我创建了一个覆盖默认样式和道具的主题对象，它在您的情况下非常有用。

标签： javascript css reactjs material-ui classname

【解决方案1】：

我认为您只需要更新您的 css 属性以匹配他们在此处使用的属性 Chip Styles

所以在你的 styles.css 文件中你可以使用

.MuiChip-root {
  background-color: #FFF !important;
  border: 1px solid #E9EEF1 !important;
}

你的芯片会按照你想要的样式设计

喜欢这里CodeSandbox

【讨论】：