如何改变 Ant-Design 'Select' 组件的样式？

Question

Suppose I want to change the standard white background color of the Select component to green.

My try...

<Select
 style={{ backgroundColor: 'green' }}>
   // Options...
</Select>

...didn't do it.

Can someone point me in the right direction?

[EDIT]

I ended up using the suggested approach from Jesper We .

Overwriting the color for all selections...

.ant-select-selection {
  background-color: transparent;
}

...then I could style the Select components individually.

Answer 1

<Select> renders a whole set of <div> s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.

The proper place to attach a background color is

.ant-select-selection {
  background-color: green;
}

This will make all your selects green. Give them individual className s if you want different colors for different selects.

Answer 2

For my form with Select element a have some code in render :

const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

And some css for colorizing.

Result :

Answer 3

Try dropdownStyle instead of style.

<Select
 dropdownStyle={{ backgroundColor: 'green' }}>
   // Options...
</Select>

dropdownStyle is one of select props.

reference: antd select

Answer 4

with all the above answers you cant change the styles of tags conditionally but with below approach you can.

You can do a hack and change the styles as you like of tags of select dropdown. You can use dropdownRender of select which takes 2 arguments

• menuNode
• props

use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.

for reference below is the example link for code sandbox

Select Tags Styles Sanbox

May not be an efficient way to do it but you can use this for now to meet your business requirement.

Thanks

Answer 5

They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064

But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661

Answer 6

Somebody stated the selector to be

.ant-select-selection {...

However it should be selector as follows:

.ant-select-selector {
  background-color: green;
}

Answer 7

From their official docs https://pro.ant.design/docs/style

Override the component style Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.

Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.

// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
        {children}
      
  </Select>,
  mountNode,
);

/* TestPage.less */
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

Two points need to be noted:

The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global. Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction

Answer 8

::ng-deep .ant-select-selector {
  background-color: red;
}

Answer 9

menuItemSelectedIcon={(props) => {
                return (mode == "multiple" ?
                  <Tooltip title="Check to confirm the apps alongwith the vendor">
                    <input type="checkbox" checked={props.isSelected}
                      style={{
                        margin: 5
                      }}
                    />
                  </Tooltip>
                  : null)
              }}

Answer 10

lastly i was working on ant dropdown and it did not get style as i wanted and i did not find a good solution for that; then i decide to share my css solution for those who are in my situation:

 .license-plate-letters { overflow-y: hidden;important: min-width; 240px.important: ;rc-virtual-list-holder>div { height. auto:important; }:rc-virtual-list-holder-inner { display, grid;important: grid-template-columns; repeat(5: 1fr);important. flex-direction: row.important; flex-wrap: wrap:important; :ant-select-item-option { padding; 0.5rem 12px !important; &:hover { background-color: #452380d2 !important; color: white !important; } } } }

 <Select virtual={false} popupClassName="license-plate-letters"> <Select.Option key={sth} Title="title">title</Select.Option> </Select>