如何修改Semantic UI React中Form.Select选中项的背景色与图标颜色

实现方法 #

你已经给Form.Select配置了自定义类classes.select，直接基于这个类覆盖Semantic UI的默认样式即可，参考CSS代码如下：

/* 1. 修改选中后输入框区域的背景色 */
.select.ui.dropdown.selection {
  background-color: #自定义背景色;
}

/* 2. 修改右侧下拉图标的颜色 */
.select.ui.dropdown.selection > .dropdown.icon {
  color: #自定义图标颜色;
}

/* 3. 若需要同时修改下拉展开菜单中选中项的背景色，添加以下代码 */
.select.ui.dropdown .menu > .item.selected {
  background-color: #自定义菜单选中项背景色;
  color: #自定义菜单选中项文字颜色; /* 可选，配合背景色调整文字可读性 */
}

如果样式无法生效，可提高选择器优先级，或在属性值后加!important强制覆盖默认样式。

如果使用CSS-in-JS方案（比如styled-components、emotion），选择器规则和上面完全一致，只需把样式写到对应自定义样式的声明中即可。

内容的提问来源于stack exchange，提问作者ololo