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

Question

假设我想将 Select 组件的标准白色背景颜色更改为绿色。

我的尝试…

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

……没做。

有人可以指出我正确的方向吗？

[编辑]

我最终使用了 Jesper We 建议的方法。

覆盖所有选择的颜色…

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

…然后我可以单独设置 Select 组件的样式。

原文由 joe.hart 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<Select> 渲染了一整套 <div> s，你需要看看生成的 HTML 元素树来了解你在做什么。你不能通过 style 属性来做，你需要在 CSS 中做。

附加背景颜色的正确位置是

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

这将使您的所有选择变为绿色。给他们单独的 className 如果你想为不同的选择提供不同的颜色。

原文由 Jesper We 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于带有 Select 元素的表单，在 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>
    ....
)

还有一些用于着色的CSS。

结果：

原文由 Hokku San 发布，翻译遵循 CC BY-SA 3.0 许可协议