web-dev-qa-db-ja.com

スタイリングreact-selectとstyled-components

フォーカスが合っているときに、上矢印の色とコントロールの色を変更しようとしていますが、うまくいきません。誰かがstyled-componentsを使用してこれを行ったことがありますか？

styled-componentsreact-select
6
Kjell Andreas Solberg

これはreact-select@v2.*に適用されます

@bamse answerと同じアイデアを、react-selectのv2に適用できます。問題は、v2では、prop classNamePrefixで追加するように指定しない限り、事前に決定されたクラス名が削除されたことです。また、クラス名の一般的な外観も変更されました。

一般的な解決策は、prop classNamePrefixを使用してクラス名を追加し、ReactSelectを中心にスタイルを設定してその中のクラスをターゲットにすることです。

import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';

const ReactSelectElement = styled(ReactSelect)`
  .react-select__indicator react-select__dropdown-indicator {
    border-color: transparent transparent red;
  }
`;

export (props) => <ReactSelectElement classNamePrefix="react-select" {...props} />
3
jjbskir

これはreact-select@v1.*に適用されます

ここreact-selectをstyled-componentsでスタイリングする例を見つけることができます。

セレクトを開いたときにキャレットの色に変更するには、これを使用できます

&.Select.is-open > .Select-control .Select-arrow {
  border-color: transparent transparent red;
}

コンポーネントは次のようになります

import React from 'react';
import ReactSelect from 'react-select';
import styled from 'styled-components';

const RedCaretWhenOpened = styled(ReactSelect)`
  &.Select.is-open > .Select-control .Select-arrow {
    border-color: transparent transparent red;
  }
`;

export (props) => <RedCaretWhenOpened {...props} />
1
bamse