在react-select中更改所选项目的颜色

Question

我想要改变React Select中所选项目的颜色。目前，所选项目的颜色为蓝色。我希望将其更改为灰色。

为此，我执行了以下步骤：

1. created a file called MyComponent.scss

   $grey: #999;
   .Select--multi {
   .Select-value {
       background-color: $grey;
       color: $grey;
   }}
   

然后将该文件导入到我的组件中

import 'react-select/scss/default.scss';
import './MyComponent.scss';

我希望这可以使用我的 $grey 变量覆盖默认颜色。

但是颜色仍然是蓝色。

- Knows Not Much

Answer 1

改变这个的颜色需要在 .css 文件中进行一些操作，因为有很多元素需要改变。请记住，rgba 的第四个数字代表半透明度。以下是需要更改的元素：

div.Select-control>.Select-value { 
background-color: rgba(153, 153, 153, .08);
border: 1px solid rgba(153, 153, 153, 0.24);
color: #999;
}
div.Select-control>.Select-value>.Select-value-icon {
border-right: 1px solid rgba(153, 153, 153, 0.24);
}
div.Select-control>.Select-value>.Select-value-label, .Select-value>a {
color: #999;
}

为了改变这些元素，我建议使用像我演示的选择器，但你也可以在符号后面使用!important来覆盖颜色。通常情况下，如果在.css文件中处于同一级别，则最具体的样式优先使用。

有两个很好的工具可以做到这一点...首先，在Chrome中右键单击元素并查看检查器(样式)。其次，一个RGBA计算器可在http://hex2rgba.devoth.com/上获得。

顺便说一句，我注意到你把一个声明放在另一个的括号里；通常情况下，如果我想进行多个选择，我会使用 .Select--multi,.Select-value，而不是使用 .css 中一个值放在另一个括号中或使用>用于子元素。

- Patrick Knott