时间戳

首页 > 解决方案 > material-ui version4.9.0中的自定义css

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

问题描述

我必须在我的项目中更新材料 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，因为我的组件会变得很大谢谢！

标签： javascriptcssreactjsmaterial-uiclassname

解决方案

我认为你只需要更新你的 css 属性以匹配他们在这里使用的那些Chip Styles

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

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

你的芯片会随心所欲地设计

就像在这里CodeSandbox

推荐阅读