Comment changer d'index Z dans React-Select Dropdown

Question

J'utilise la bibliothèque de réacteur-Select pour créer une liste déroulante Autocomplète. J'ai utilisé 2 déroulants parallèlement si 2e a quelques données et j'ouvre en premier à celui-ci, alors le problème Zindex vient. Voir l'image

Answer 1

Essayez ce moyen hacrain de définir Zindex et laissez-moi savoir si cela fonctionnait :)

<Select
  styles={{
    // Fixes the overlapping problem of the component
    menu: provided => ({ ...provided, zIndex: 9999 })
  }}
  value={selectedOption}
  onChange={evt => onSelectChange(evt, index)}
  options={options}
/>

Answer 2

Une autre façon est que nous pouvons configurer le classNamePrefix et le contrôler via la classe extérieure.

import Select from "react-select";

<Select
   classNamePrefix={"my-custom-react-select"}
/>

.my-custom-react-select__menu {
  z-index: 2;
}

Bonus, nous pouvons tout refaire

.my-custom-react-select__control {
  border-width: 1px !important;
  border-color: #cbd5e0 !important;
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
}

.my-custom-react-select__control--is-focused {
  border-color: #746df7 !important;
  box-shadow: none !important;
}

.my-custom-react-select__indicator-separator {
   display: none;
}