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

Try dropdownStyle instead of style.

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

dropdownStyle is one of select props.

reference: antd select

Answer 2

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

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: