How to change the style of a Ant-Design 'Select' component?

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 classNames 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