Antd Select 选择器组件设置 focus 样式

众所周知，Select 组件的基本色调是 #4096ff 与 #1677ff 天蓝色。根据项目需求，我需要把 Select 组件的 hover 与 focus 的颜色都改成主色调红色。于是我开始了自己漫长的尝试。

尝试一：在 Select 组件外包裹一个类，在该类下面写 :global 下的 .ant-select-selector:hover 与 focus 的样式。

代码如下：

<div className={styles.selectBoxWrapper}>
    <Select
      className={styles.selectBox}
      placeholder="beverage"
    />
</div>

.selectBoxWrapper {
	:global {
        .ant-select-selector:hover {
            border: 1px solid red !important;
        }
        .ant-select-selector:focus {
            border: 1px solid red !important;
            box-shadow: 0 0 0 2px #77141f19 !important;
        }
    }
}

但是效果不佳，在 hover 时确实有变红色效果，但是在 focus 时就还是原来的效果。但是在 f12 开发者工具中点击显示 :focus 启动样式，又能显示样式，让我感到很蒙。
hover时红色：

focus 时但是鼠标移开了，变回原来的颜色 #1677ff

focus的同时点启用 f12 开发者页面的 :focus 功能，又有效果了：

我一直感到很怪，因为修改 Input，Button 这类组件的时候都没有遇到问题。直到认识到 antd 5 有一个 Design Token，里面的 Global Token 里面可以修改基本样式。因此我在搜寻了数十次以后，决定使用这种方法来定义 Select 的样式。

尝试二：使用 Design Token 修改 Primary color

可以看到在 Global Token 下有一个 colorPrimary 键，它的值对应的就是组件的主色调。现在的主色调是 #1677ff，我们将其改成我们项目的主色调就行。

代码如下：

<ConfigProvider
        theme={{
          token: {
            colorPrimary: "red",
          }
        }}
      >
	<div className={styles.selectBoxWrapper}>
	    <Select
	      className={styles.selectBox}
	      placeholder="beverage"
	    />
	</div>
</ConfigProvider>

可以发现效果都是我们想要的效果。

OK，终于，本线程结束。