react-select drowdown에서 zIndex를 변경하는 방법

react-select drowdown에서 zIndex를 변경하는 방법

리액트 선택 라이브러리를 사용하여 자동 완성 드롭다운을 만들고 있습니다.2번째에 데이터가 있으면 2개의 드롭 다운을 병행하여 사용하고, 1번째 드롭 다운을 열면 zIndex 문제가 발생합니다.이미지를 보다

이 행들을 모두 추가해 주세요.Select태그:

<Select 
    // other props
    menuPortalTarget={document.body} 
    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>

zIndex를 설정하기 위한 이 해킹 방법을 시도해보고, 효과가 있었는지 알려주세요:)

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

6개의 관련 이슈를 보고도 해결 방법을 찾지 못한 후, 나는 마침내 하나를 찾았다.

<Select
    menuPortalTarget={document.body}
    menuPosition={'fixed'} 
/>

이 두 가지 옵션을 Select 구성 요소에 추가합니다.

새로운 Respect Portal 기능을 이용할 수 있을 것 같습니다.

편집: 상기의 조작을 실시하면, 다음의 이유로 메뉴가 페이지에 고정되는 문제가 발생합니다.position: fixed제거하는 것이 도움이 될 수 있습니다.https://github.com/JedWatson/react-select/issues/4088

저에게 해결책은 모든 답변의 총합이었습니다(감사합니다).

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 9999 }),
    menu: provided => ({ ...provided, zIndex: 9999 })
    ///.....
  }


 <Select
  //.....
  menuPortalTarget={document.body}
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  />  

또 다른 방법은, 다음의 설정을 실시할 수 있습니다.classNamePrefix외부 클래스에서 조종할 수 있습니다.

import Select from "react-select";

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

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

보너스, 우리는 모든 것을 다시 스타일링 할 수 있습니다.

.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;
}

이러한 답변의 조합만이 효과적인 솔루션이 되었습니다.Next.js.menuPortalTarget={document.body}오류로 인해 응용 프로그램이 중단되었습니다.ReferenceError: document is not defined이것은, 에 있어서,SSG/SSR:)

menuPosition={"fixed"}@I Stand With Israel이 제안하는 바와 같이 @hemant rao의 답변이 조합되어 있습니다.menuPortal: (base) => ({ ...base, zIndex: 4 }),.

아래 두 줄의 코드를 추가하기만 하면 됩니다.

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 5 }),
   
    ///.....
  }

 <Select
  //.....
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  /> 

이것은, 「react-select」(버전 4.3.1)를 사용하는 경우의 솔루션입니다.

import ReactSelect from 'react-select';
...
...
<ReactSelect
  className="custom_zindex"
  ...
  ...
/>

css 파일:

.custom_zindex {
   z-index: 100;  /* or 999 */
}

className은 react-select(https://react-select.com/props)의 소품 중 하나입니다.

이 선택 항목의 상위 구성 요소의 zIndex를 변경합니다.

<div style={{zIndex:1000}}>
  <React-Select-Component/>
</div>

언급URL : https://stackoverflow.com/questions/55830799/how-to-change-zindex-in-react-select-drowpdown