3

我想在反应选择中更改所选项目的颜色。当前选定的项目显示为蓝色。我想把颜色改成灰色

在此处输入图像描述

为此，我做了以下步骤

  1. 创建了一个名为 MyComponent.scss 的文件

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

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

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

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

但颜色仍然是蓝色的。

4

1 回答 1

3

Changing the color of this requires some juggling of .css as there are a lot of elements that have to be changed. Remember that the 4th number of rgba represents translucence. Here are the elements that need to be changed:

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;
}

Towards changing these elements, I recommend using selectors like I've demonstrated, however you can also override colors using !important just after the notation. Generally, the most specific style wins if it all exists at the same level in .css.

Two great tools exist to do this... First in Chrome right click the element and look at your inspector (styles). Second, an rgba calculator is available at http://hex2rgba.devoth.com/.

PS... I noticed that you've got one declaration inside the curlies of another; generally if I want to do multiple selections I use .Select--multi, .Select-value { not one value inside another's brackets with .css or I use the > for child elements.

于 2016-02-05T15:36:01.493 回答