J'utilise le composant react-select avec bootstrap v4
Tous les éléments de bootstraps sont basés sur une hauteur de 35px semble-t-il, la hauteur par défaut du composant react-select est de 38px, ce qui semble un peu étrange.
Avez-vous des idées sur la façon dont je peux modifier la hauteur du composant?
Il utilise une bibliothèque de styles JS bizarre que je n'ai jamais rencontrée auparavant. J'ai réussi à le faire imiter le contour sur la mise au point en l'utilisant, mais la hauteur m'échappe, toute aide est très appréciée
Vous pouvez jouer avec ici
7 Réponses :
Vous pouvez ajouter vos styles à n'importe quelle partie des composants sélectionnés, jetez un œil aux docs
voici une démonstration fonctionnelle de ce que vous demandez.
Dans votre cas, le code que vous devez ajouter ressemblera à ceci:
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
isSearchable={isSearchable}
name="color"
options={colourOptions}
styles={customStyles}
/>
et dans le composant select:
const customStyles = {
control: base => ({
...base,
height: 35,
minHeight: 35
})
};
comme vous pouvez le voir cependant, lorsque vous diminuez la hauteur du contrôle uniquement à moins de ~ 34px, cela ne diminue en fait pas la taille des autres composants. Je dois, et j'imagine que l'affiche originale, doit diminuer la hauteur du contrôle tout en gardant la valeur centrée verticalement, le "x" sur le côté droit, etc. Je veux diminuer la hauteur de tout pour qu'il soit moins grand qu'un rectangle
Comment cela est-il voté et accepté? C'est littéralement la première chose que l'on pense essayer, et ça ne marche pas ...
Cela aurait pu être plus réfléchi si le composant pouvait répondre aux classes de contrôle de formulaire bootstrap normales pour le redimensionnement, etc.
J'ai pu écraser le style css de la liste de menus:
/* over write css in react-select module */
.Select__menu-list {
max-height: 120px !important;
}
Vous pouvez spécifier classNamePrefix et l'utiliser pour remplacer les styles CSS.
.mySelect__value-container{
height: 35px;
}
<Select classNamePrefix="mySelect" />
h2 >
Passant des heures, je me retrouve avec ceci pour obtenir une hauteur exacte de 30px de réaction, sélectionnez avec une bordure de 1px:
const customStyles = {
control: (provided, state) => ({
...provided,
background: '#fff',
borderColor: '#9e9e9e',
minHeight: '30px',
height: '30px',
boxShadow: state.isFocused ? null : null,
}),
valueContainer: (provided, state) => ({
...provided,
height: '30px',
padding: '0 6px'
}),
input: (provided, state) => ({
...provided,
margin: '0px',
}),
indicatorSeparator: state => ({
display: 'none',
}),
indicatorsContainer: (provided, state) => ({
...provided,
height: '30px',
}),
};
vous monsieur êtes le vrai MVP
Qu'est-ce que ... fourni?
Les styles fournis par react-select sont fournis, si vous ne les répartissez pas, vous n'obtiendrez pas les styles par défaut pour les autres propriétés.
Si vous souhaitez uniquement redimensionner la boîte, utilisez ceci.
.create-select {
width: 160px;
float: right;
color: #000;
[class$="ValueContainer"] {
min-height: 28px !important;
max-height: 28px;
}
[class$="IndicatorsContainer"] {
min-height: 28px !important;
max-height: 28px;
}
[class$="-Input"] {
min-height: 28px !important;
max-height: 28px;
padding: 0px;
}
[class$="-control"] {
min-height: 28px !important;
max-height: 28px;
}
}
J'étais à peine capable de rendre le composant Select aussi petit que 32px ( dans mon navigateur ) en utilisant l'attribut theme . Cela fonctionne bien lorsque la hauteur est supérieure à 45 pixels. Vous pouvez également omettre l'attribut baseUnit .
Cela ne fonctionnait pas pour les petites tailles.
<Select options={props.options} theme={theme}/>
const theme = (theme: Theme) => ({
...theme,
spacing: {
...theme.spacing,
controlHeight: 30,
baseUnit: 0,
}
});
La raison pour laquelle vous ne pouvez pas le réduire à moins de 36 pixels est que les paramètres dropdownIndicator et markerContainer (l'icône claire est affichée) prennent 20 pixels (icône) + Rembourrage 8px sur tous les côtés. Si vous réduisez ce remplissage, le minHeight fonctionnera réellement.
dropdownIndicator: (styles) => ({
...styles,
paddingTop: 7,
paddingBottom: 7,
}),
clearIndicator: (styles) => ({
...styles,
paddingTop: 7,
paddingBottom: 7,
}),
Vous pouvez jouer avec le remplissage de dropdownIndicator et clearIndicator .
J'ai remarqué que vous ne pouvez pas passer sous 30px en minHeight à cause du valueContainer , à moins que vous ne modifiiez sa hauteur / remplissage.
cette réponse + @ erez-lieberman fonctionne parfaitement pour des hauteurs inférieures à 36px