覆盖antd组件样式/className答案

【问题标题】：override antd component style/className覆盖antd组件样式/className
【发布时间】：2020-08-07 01:54:12
【问题描述】：

我正在尝试更新一个 antd 组件样式。我使用这个：https://pro.ant.design/docs/style#override-the-component-style 作为尝试更新组件样式的参考，但我无法使其工作。

这是我正在尝试的东西：https://codesandbox.io/s/cool-wind-kkub0?file=/index.less 我不明白我错过了什么。有什么建议吗？

【问题讨论】：

【解决方案1】：

您正在使用范围样式，这是通过弹出您的应用程序或安装 npm 包来加载样式组件样式来实现的。为此，请将 .less 代码粘贴到 index.css 文件中

index.css

.ant-select-selection {
  max-height: 51px;
  overflow: auto;
  background-color: blue;
}
.ant-select-selection-search-input {
  background-color: green;
}
.ant-select-item-option-content {
  background-color: orange;
}
.ant-select-item {
  position: relative;
  display: block;
  min-height: 32px;
  padding: 5px 12px;
  color: red;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  background-color: #9068b0;
}

【讨论】：

感谢您的建议。这似乎有效。但是，'index.css' 是否覆盖了 antd 组件的全局 css？我没有从 CSS 中导入任何样式。
@ozn 是的 index.css 确实会覆盖 css，因为 antd 样式是在 index.js 中导入的，并且在 index.css 的下方会被导入，因此任何低于该样式的文件都会获得高优先级。
是否可以在 css 中有多个覆盖？例如对于ant-select-item-option-content，我想要一个覆盖，背景颜色为橙色，另一个列表/下拉/选择选项背景颜色为蓝色。无论何时我有列表/下拉/选择组件，我都想为它使用不同的 css 选项。