覆盖antd组件的style/className [英] override antd component style/className

问题描述

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

I'm trying to update a antd component style. I'm using this: https://pro.ant.design/docs/style#override-the-component-style as reference to try updating a component styling but I can't make it to work.

这是我正在尝试的方法: https://codesandbox.io/s/cool-wind-kkub0?file =/index.less 我不明白我在想什么.有什么建议吗?

Here's something I'm trying: https://codesandbox.io/s/cool-wind-kkub0?file=/index.less I don't understand what I am missing. Any suggestions?

推荐答案

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

You are using scoped styling which is achieved by ejecting your app or installing npm package for loading styled component styles. For this to work, paste your .less code in your index.css file

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

这篇关于覆盖antd组件的style/className的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！