如何更改 Ant-Design 'Select' 组件的样式? [英] How to change the style of a Ant-Design 'Select' component?
问题描述
假设我想将 Select 组件的标准白色背景色更改为绿色.
我的尝试...
<选择style={{ backgroundColor: 'green' }}>//选项...选择>
...没有这样做.
有人能指出我正确的方向吗?
我最终使用了 Jesper We 中建议的方法.
覆盖所有选择的颜色...
.ant-select-selection {背景色:透明;}
...然后我可以单独设置 Select 组件的样式.
渲染了一整套
附加背景颜色的正确位置是
.ant-select-selection {背景颜色:绿色;}
这将使您的所有选择变为绿色.如果您希望为不同的选择使用不同的颜色,请给他们单独的 className
.
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.
<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.
这篇关于如何更改 Ant-Design 'Select' 组件的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!