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

これの色を変更するには、変更する必要がある要素がたくさんあるため、.css を調整する必要があります。rgba の 4 番目の数字は半透明を表すことに注意してください。変更する必要がある要素は次のとおりです。

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 の同じレベルに存在する場合、最も具体的なスタイルが優先されます。

これを行うための優れたツールが 2 つあります。最初に Chrome で要素を右クリックし、インスペクター (スタイル) を確認します。次に、rgba 計算機はhttp://hex2rgba.devoth.com/で入手できます。

PS ...別の宣言の中にある宣言があることに気付きました。通常、複数の選択を行いたい場合は、.Select--multi, .Select-value { .css を使用して別の括弧内にある値を使用しないか、子要素に > を使用します。

于 2016-02-05T15:36:01.493 に答える