假设我想将 Select 组件的标准白色背景色更改为绿色。
我的尝试...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
……没有做。
有人可以指出我正确的方向吗？
[编辑]
我最终使用了Jesper We建议的方法。
覆盖所有选择的颜色...
.ant-select-selection {
background-color: transparent;
}
...然后我可以单独设置 Select 组件的样式。
<Select>渲染了一整套<div>s，你需要看一下生成的HTML元素树才能理解你在做什么。你不能通过 style 属性来做，你需要在 CSS 中做。
附加背景颜色的正确位置是
.ant-select-selection {
background-color: green;
}
这将使您的所有选择变绿。className如果您想为不同的选择使用不同的颜色，请给他们单独的s。
对于我的带有 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。
结果：
尝试 dropdownStyle 而不是 style。
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle 是选择props之一。
参考：antd选择
使用上述所有答案，您无法有条件地更改标签样式，但使用以下方法可以。
您可以根据自己的喜好更改选择下拉列表的标签的样式。您可以使用带有 2 个参数的 select 的 dropdownRender
使用 props children 属性到达每个标签并更改样式，您可以根据需要有条件地更改样式。
以下是代码沙箱的示例链接，供参考
可能不是一种有效的方法，但您现在可以使用它来满足您的业务需求。
谢谢