如何更改选择的反应选择输入颜色？

Question

使用react-select（React.js），我注意到当单击选择字段时，它显示为蓝色。

我之所以说蓝色，是因为它似乎也穿过了我给它的一些黄色边框，所以它看起来可能是绿色的。

如何更改此颜色？

我假设我需要正确的CSS选择器，并且需要'control'样式键。正确吗？

我已经设法设置了常规边框颜色以及悬停时的边框颜色：

const SelectStyle = {
  control: styles => ({
    ...styles,
    border: `1px solid ${Colors.sec6}`,
    "&:hover": {
      borderColor: "red"
    }
  }),
  ...
};

我想我可以使用:focus或:active来更改颜色，但这似乎不起作用。我尝试了以下方法，但无济于事：

"&:focus": {
  borderColor: "pink"
},
"&:active": {
  borderColor: "orange"
}

我已经检查了W3schools上的CSS选择器列表，但我看不到其中哪个是我需要的。

Answer 1

在react-select GitHub页面上找到答案。

webp

所以，这对我有用： const customStyles = { control: (base, state) => ({ ...base, boxShadow: "none" // You can also use state.isFocused to conditionally style based on the focus state }) };

来源：https://github.com/JedWatson/react-select/issues/2728