React-Select facilite la création de menus sélectionnables – Meilleure programmation

Online Coding Courses for Kids

Comment stylons-nous le Select composant? Premièrement, nous devons savoir comment Select le composant est converti en éléments HTML.

Cette ligne de code, . Ce sont les éléments HTML convertis:

Avec des noms de classe spécifiques, les éléments peuvent être stylisés à l’aide de règles CSS.

Cependant, le Select Le composant offre un meilleur moyen de remplacer les styles intégrés pour chaque pièce. Il utilise le styleFn , qui a deux paramètres:

  • provided: Styles intégrés par défaut du composant.
  • state: État actuel du composant, qui peut être utilisé pour générer de nouveaux styles.

Le code suivant personnalise un Select composant:

N’oubliez pas de diffuser l’original provided style. Sinon, vous serez surpris par l’apparence du style de base manquant.

C’est le provided objet:

C’est le state objet:

Dans le code ci-dessus:

  • lignes 17-23 style chacune optionla bordure, la couleur, l’opacité et le rembourrage à l’air libre menu.
  • Les lignes 24 à 28 stylisent la sélection control boîte.
  • Les lignes 29 à 32 stylisent la sélection singleValue.

Voici le style Select composant:

Ces pièces peuvent être stylisées:

  • clearIndicator
  • container
  • control
  • dropdownIndicator
  • group
  • groupHeading
  • indicatorsContainer
  • indicatorSeparator
  • input
  • loadingIndicator
  • loadingMessage
  • menu
  • menuList
  • menuPortal
  • multiValue
  • multiValueLabel
  • multiValueRemove
  • noOptionsMessage
  • option
  • placeholder
  • singleValue
  • valueContainer

Close Menu