如何更改Ant-Design“选择"组件的样式? [英] How to change the style of a Ant-Design 'Select' component?

问题描述

假设我想将选择"组件的标准白色背景颜色更改为绿色.

Suppose I want to change the standard white background color of the Select component to green.

我的尝试...

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

...没有做到.

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

Can someone point me in the right direction?

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

I ended up using the suggested approach from Jesper We.

覆盖所有选择的颜色...

Overwriting the color for all selections...

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

...然后我可以分别对Select组件进行样式设置.

...then I could style the Select components individually.

推荐答案

<Select>呈现了一组完整的<div> s，您需要查看生成的HTML元素树以了解您的操作.您无法通过style属性来完成此操作，而需要在CSS中完成.

<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;
}

这将使所有选择变为绿色.如果您想为不同的选择使用不同的颜色，请给他们单独的className.

This will make all your selects green. Give them individual classNames if you want different colors for different selects.

这篇关于如何更改Ant-Design“选择"组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！