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, , génère les éléments HTML suivants:
Au niveau supérieur, c’est un container, qui contient un control, qui est composé d’un valueContainer et un indicatorsContainer.
le valueContainer a un placeholder Et un input.
le indicatorsContainer est la flèche déroulante du côté droit, etc.
le Select composant peut prendre un className pour le Select élément, et classNamePrefix pour les éléments internes avec le préfixe donné.
Nous fixons className à “top”, et classNamePrefix à “inner” à l’intérieur . 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 libremenu. - Les lignes 24 à 28 stylisent la sélection
controlboîte. - Les lignes 29 à 32 stylisent la sélection
singleValue.
Voici le style Select composant:
Ces pièces peuvent être stylisées:
clearIndicatorcontainercontroldropdownIndicatorgroupgroupHeadingindicatorsContainerindicatorSeparatorinputloadingIndicatorloadingMessagemenumenuListmenuPortalmultiValuemultiValueLabelmultiValueRemovenoOptionsMessageoptionplaceholdersingleValuevalueContainer
