CODEWITHSUNDEEP
reactjsantd
ozn
ozn

Reputation: 2228

override antd component style/className

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.

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?

Upvotes: 0

Views: 2683

Answers (1)

Zayn
Zayn

Reputation: 741

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

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

Upvotes: 2

Related Questions