web-dev-qa-db-fra.com

Comment réduire la taille de React Select in v2

Le nouveau contrôle v2 react-select est excellent, mais par défaut il est trop volumineux. Existe-t-il un moyen (de préférence) simple de réduire la hauteur au même niveau qu'un contrôle de sélection standard (en utilisant Bootstrap v3)?

react-select
8
Darren Oster

React-Select v2 utilise l'émotion CSS-in-JS, donc la nouvelle façon de contrôler le style sur les composants et sous-composants sélectionnés est de passer un objet style à la propriété styles. Vous pouvez également définir un nom de classe pour le style avec une feuille de style externe.

Plus/Meilleure information ICI

Chemin CSS-in-JS

const customControlStyles = base => ({
    height: 50,
});

<Select ... styles={control: customControlStyles} ... />

Chemin CSS

<Select ... className="myClassName" ... />

.myClassName__control {
    height: 50px;
}
10
Evan Hennessy

Essayez de transmettre une valeur pour l'accessoire maxMenuHeight:

<Select
  maxMenuHeight={190}
/>

voir documentation

8
ryanrain

En ajoutant ce que @craigmichaelmartin a commenté, le minHeight sur control est important à écraser, et il doit être réglé à un tas d'endroits afin de vraiment le surmonter.
Voici ce qui a fonctionné pour moi pour qu'il corresponde à la hauteur d'un élément de saisie de texte 36px (Ces paramètres fonctionnent également en CSS, bien sûr)

const customStyles = {
  container: (provided) => ({
    ...provided,
    display: 'inline-block',
    width: '250px',
    minHeight: '1px',
    textAlign: 'left',
    border: 'none',
  }),
  control: (provided) => ({
    ...provided,
    border: '2px solid #757575',
    borderRadius: '0',
    minHeight: '1px',
    height: '42px',
  }),
  input: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  dropdownIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingTop: '0',
    paddingBottom: '0',
    color: '#757575',
  }),
  indicatorSeparator: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '24px',
  }),
  clearIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '40px',
    paddingTop: '0',
    paddingBottom: '0',
  }),
  singleValue: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingBottom: '2px',
  }),
};
6
jeffriestube

La définition de la propriété height semble conserver cette hauteur même en cas de débordement (de plusieurs valeurs sélectionnées se déversant sur la ligne suivante), vous vous retrouvez donc avec des valeurs qui sortent de la zone.

J'ai résolu ce problème en définissant le rembourrage en haut et en bas sur le dropdownIndicator et le clearIndicator et en définissant minHeight sur control comme ceci:

const styles = {
  control: (base) => ({
    ...base,
    minHeight: 32,
  }),
  dropdownIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
  clearIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
};

<Select styles={styles}/>
4
Simon Tong

Vous pouvez également essayer de styliser le champ de saisie de votre composant React-Select, car cela peut avoir un impact sur la hauteur de l'ensemble du composant React-Select. Dans mon cas, cela se produisait grâce à l'ingérence de Materializecss.

const customStyles = {
  input: styles => {
    return {
      ...styles,
      height: '1.8em'
  };
}
const App = () => (
  <Select
    styles={customStyles}
    options={...}
  />
);
1
xiaoju