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

Question

我想更改react select中所选项目的颜色。目前，所选项目显示为蓝色。我想将颜色更改为灰色

为此，我做了以下步骤

1. 创建了一个名为MyComponent.scss

   的文件

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

然后将此文件导入我的组件

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

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

但颜色仍然是蓝色。

Answer 1

改变颜色需要一些jcgling .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中右键单击元素并查看检查器（样式）。其次，http://hex2rgba.devoth.com/提供了一个rgba计算器。

PS ......我注意到你在另一个的曲线里面有一个声明;通常如果我想做多个选择我使用.Select - multi，.Select-value {不是一个值在另一个括号内的.css或我使用＆gt;对于儿童元素。