react-select v2 CSS样式问题：输入框字体与下拉指示器hover颜色设置

针对你遇到的两个问题，我来一步步帮你解决：

问题1：输入框字体样式（fontFamily/fontSize等）不生效 #

你提到color属性生效，但其他字体样式没反应，这大概率是因为React Select v2的输入框默认继承了control组件的字体样式，导致你在input里设置的字体属性被父组件的样式覆盖了。这里有两种可靠的解决方法：

方法1：在control组件中设置全局字体样式（推荐） #

既然输入框会继承control的样式，那直接在control里定义字体属性，这样输入框和其他内部元素都会统一应用：

const customStyles = {
  control: (base) => ({
    ...base,
    fontFamily: 'Arial',
    fontSize: 13,
    fontWeight: 500
  }),
  input: (base) => ({
    ...base,
    color: 'green' // 单独设置输入框文字颜色
  })
};

// 使用时
<Select styles={customStyles} ... />

方法2：强制覆盖输入框样式（不推荐，仅当方法1无效时使用） #

如果必须单独给输入框设置样式，可以通过添加!important提升样式优先级，绕过继承的限制：

const customStyles = {
  input: (base) => ({
    ...base,
    fontFamily: 'Arial !important',
    fontSize: '13px !important',
    fontWeight: 500,
    color: 'green'
  })
};

问题2：Hover Control组件时修改Dropdown Indicator的颜色 #

React Select v2的样式系统中，control组件无法直接通过嵌套样式修改dropdownIndicator，但我们可以利用CSS的父元素hover选择器，结合组件的默认类名来实现。不过更优雅的方式是通过dropdownIndicator的样式函数，监听父组件的hover状态：

const customStyles = {
  control: (base) => ({
    ...base,
    // 这里可以保留你原本的control样式
  }),
  dropdownIndicator: (base) => ({
    ...base,
    // 当control hover时，修改indicator的颜色
    '.css-1pahdxg-control:hover &': { // 若不生效，可检查浏览器元素面板的control组件实际类名
      color: '#ff0000' // 你想要的hover颜色
    }
  })
};

如果你担心默认类名会变动，也可以通过自定义类名的方式：

1. 给Select组件添加className="custom-select"
2. 然后在样式中这样写：

dropdownIndicator: (base) => ({
  ...base,
  '.custom-select .css-1pahdxg-control:hover &': {
    color: '#ff0000'
  }
})

因为v2还处于beta阶段，部分样式API可能不够完善，上面的方法都是基于当前beta版本的稳定实现，应该能解决你的问题。

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