web-dev-qa-db-fra.com

Comment styler les options de réaction-sélection

Quel est le meilleur moyen de styliser les options d'un composant react-select ( https://github.com/JedWatson/react-select )?

Je peux très bien cibler la sélection elle-même, avec quelque chose comme:

...
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}
/>

Le problème est que les options réelles lorsque la sélection est développée restent stylées par défaut. Comment puis-je cibler ces options pour le style?

Voici un exemple de ce dont je parle. Je peux appeler le caractère fictif, mais pas les options:  enter image description here

cssreactjsreact-select
12
tim5046

La réponse de @ btzr est correcte et le style react-select utilisant des classes CSS est (relativement) facile.

Toutefois, il est difficile de styler les éléments de menu, car chaque fois que vous ouvrez le menu et essayez d’inspecter les éléments, le menu se ferme à nouveau.

Ce qui est utile est de spécifier (temporairement) le paramètre menuIsOpen={true}, qui gardera le menu ouvert pour une inspection plus facile.

10
johndodo

J'ai le style d'usage:

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

Il y a plus d'options pour cela. Consultez la documentation sur le style.

https://react-select.com/styles

1
harsimarriar96