如何修改Ant Design Select组件hover与active状态的边框颜色

我希望修改Ant Design库中Select组件在hover和active状态下的边框颜色，当前使用的组件代码如下：

import { Select } from "antd";

<Select
  mode="tags"
  style={{
    minWidth: 200,
    maxWidth: 500,
    margin: "1rem",
  }}
  placeholder="Catégories"
  onChange={handleChange}
  options={options}
/>

我尝试在style属性中添加borderColor: "#ff7640"，修改后的代码如下：

import { Select } from "antd";

<Select
  mode="tags"
  style={{
    minWidth: 200,
    maxWidth: 500,
    margin: "1rem",
    borderColor: "#ff7640"
  }}
  placeholder="Catégories"
  onChange={handleChange}
  options={options}
/>

但该方法无效。我发现边框颜色由类名为.ant-select-selector的子div控制，于是尝试在CSS文件中添加以下样式：

.ant-select-selector:hover {
   border-color: "#ff7640"
}

但仍然无法生效，请问该如何解决这个问题？

1. 修复CSS语法并提升选择器优先级 #

你的CSS代码存在两个问题：border-color的值错误添加了引号，且Ant Design默认样式的优先级高于自定义样式。可以通过以下方式修复：

/* hover状态 */
.ant-select:hover .ant-select-selector {
  border-color: #ff7640 !important;
}

/* 聚焦（active）状态 */
.ant-select-focused .ant-select-selector {
  border-color: #ff7640 !important;
  box-shadow: 0 0 0 2px rgba(255, 118, 64, 0.2); /* 可选，匹配主题聚焦效果 */
}

若不想使用!important，可以给Select组件添加自定义类名来提升选择器特异性：

<Select
  className="custom-tag-select"
  mode="tags"
  style={{ minWidth: 200, maxWidth: 500, margin: "1rem" }}
  placeholder="Catégories"
  onChange={handleChange}
  options={options}
/>

对应的CSS：

.custom-tag-select:hover .ant-select-selector {
  border-color: #ff7640;
}

.custom-tag-select.ant-select-focused .ant-select-selector {
  border-color: #ff7640;
  box-shadow: 0 0 0 2px rgba(255, 118, 64, 0.2);
}

2. 采用Ant Design主题定制（推荐方案） #

若项目需多处修改组件样式，官方主题定制是更规范的方案：

• Less环境：在全局Less文件中配置变量，确保该文件在Ant Design样式之前导入：

@select-hover-border-color: #ff7640;
@select-focused-border-color: #ff7640;
@select-focused-shadow: 0 0 0 2px rgba(255, 118, 64, 0.2);

• CSS变量（Ant Design 5+）：在全局CSS中设置根变量：

:root {
  --ant-select-hover-border-color: #ff7640;
  --ant-select-focused-border-color: #ff7640;
  --ant-select-focused-shadow: 0 0 0 2px rgba(255, 118, 64, 0.2);
}

3. CSS Modules场景下使用深度选择器 #

如果项目使用CSS Modules，需通过:deep()穿透样式隔离：

:deep(.ant-select:hover .ant-select-selector) {
  border-color: #ff7640;
}

:deep(.ant-select-focused .ant-select-selector) {
  border-color: #ff7640;
  box-shadow: 0 0 0 2px rgba(255, 118, 64, 0.2);
}

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