web-dev-qa-db-ja.com

反応選択オプションのスタイル設定方法

react-selectコンポーネントの（ https://github.com/JedWatson/react-select ）オプションのスタイルを設定する最良の方法は何ですか？

私は次のようなもので、選択自体をうまくターゲットにすることができます：

...
import Select from 'react-select'
...
const styles = {
  fontSize: 14,
  color: 'blue',
}
<Select
    options={[1,2,3,4]}
    placeholder={'Select something'}
    clearable={false}
    style={styles.select}
/>

問題は、選択が展開されたときの実際のオプションがデフォルトのままになっていることです。これらのオプションをスタイリングの対象にするにはどうすればよいですか？

ここに私が話していることの例があります。私はプレースホルダーをスタイルできますが、オプションはできません： enter image description here

cssreactjsreact-select
15
tim5046

@btzrの答えは正解であり、CSSクラスを使用してreact-selectをスタイリングするのは（比較的）簡単です。

ただし、メニューを開いて項目を調べようとするたびにメニューが再び閉じるため、メニュー項目のスタイルを設定することは困難です。

役立つのは（一時的に）menuIsOpen={true}パラメーターを指定することです。これにより、メニューが開いたままになり、検査が容易になります。

16
johndodo

私はスタイルを使用しました：

const options = [
    {label: "one", value: 1, style: { color: 'red' }},
    {label: "two", value: 2, style: { color: 'blue' }}
    // more options...
];
...
<Select options={options} />
3
Alessander França
const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
  })
}
<Select styles={customStyle} >

これにはさらにオプションがあります。スタイリングのドキュメントをご覧ください。

https://react-select.com/styles

1
harsimarriar96