CODEWITHSUNDEEP
reactjsantd
Rahul Syal
Rahul Syal

Reputation: 625

Not able to change styling of OptGroup of ant design

I have been trying to change the font and color of the OptGroup but its not changing. I am using emotion css

     <Select 
       className={css
         .ant-select-dropdown-menu-item-group-title{
            font-size: 15px;
            color: white;
       }
      >
      <OptGroup
        label="Manager"
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
      </OptGroup>
      </Select>

Upvotes: 1

Views: 1261

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53964

There are some antd CSS classes that can't be overridden through CSS-in-JS like styled-components or emotion. It depends on when the css style applied within the antd implementation (you should inspect the dom tree).

It includes overriding ant-select-dropdown-menu-item-group-title, in this case, you only can do it via .css file:

/* App.css */
.ant-select-dropdown-menu-item-group-title {
  font-size: 30px;
}

// App.jsx
import './App.css';

Upvotes: 3

Related Questions