1
votes

comment supprimer padding-top dans le menu déroulant react-select?

const customStyles = {

    indicatorSeparator: styles => ({ ...styles, display: "none" }),
    option: (provided, state) => ({
      ...provided,
      fontSize: 16,

        height:"40px",
      paddingLeft: "11px",
      ":firstChild": {
        margin: "10px",
        padding: "10px",
        borderRadius: "10px 10px 10px 10px"

    }),



 <Select
    styles={customStyles}
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

entrez la description de l'image ici https://codesandbox.io/s/react-codesandboxer-example-90zz6

reactjs react-select

0 commentaires

3 Réponses :

5
votes

Vous devez définir les styles de la clé de style menuList en fonction de la docs .

menuList: (provided, state) => ({
   ...provided,
   paddingTop: 0,
   paddingBottom: 0,
}),

4 commentaires

merci, je n'ai tout simplement pas pu voir la classe parce que la liste se ferme

moi non plus, mais dans Chrome, je peux appuyer sur "Ctrl + Maj + C" pour sélectionner des éléments, ce qui ne déclenche pas d'événements de flou sur les éléments ciblés. Ensuite, je pourrais facilement survoler l'élément et voir son nom de classe.

React-select utilise emotion , atteindre votre objectif avec la classe css est un anti-pattern. Vous devez continuer à utiliser les accessoires styles

@Laura vous avez raison. J'ai mis à jour ma réponse pour utiliser les styles personnalisables de react-select

1
votes

utiliser ce style multi en ligne en utilisant {[firststyle, secandstyle]} et définissez le second style sous le premier style comme forme suivant

 `const nopadinng={
      paddingTop:0};`

and remove  the classname

    // remove the className 
        className="basic-multi-select"


    const nopadinng={
      paddingTop:0};
            styles={[customStyles,nopadinng]}

0 commentaires

3
votes

Le margin-top par défaut entre la liste de menu et la boîte de sélection peut être facilement supprimé avec les accessoires styles comme ceci:

const styles = {
  menu: base => ({
    ...base,
    marginTop: 0
  })
}

Live exemple ici .

0 commentaires