[React-select] Select 컴포넌트에 z-index 적용하기

React-select 라이브러리를 이용해서 Select 컴포넌트를 생성했는데
컴포넌트를 클릭하면 펼쳐지는 dropdown 영역이 다른 컴포넌트에 가려서 보이지 않았다.
공식 홈페이지에 있는 문서를 참고하여 수정해봐도 안됨,,,,

먼저 내가 첫번째로 시도한 방식은 아래에 있는 공식홈페이지에 Docs를 참고하였다

React-Select

const CustomSelect = ({
}) => {
  const customStyles = {
    container: (provided) => ({
      ...provided,
    }),
    menuPortal: (provided) => ({ ...provided, border: `1px solid red`, zIndex: 9999 }),
  };
  return (
    <Select
   	  //...props
      styles={customStyles}
    />
  );
};

이런식으로 menuPortal이라는 Style Object Key에 zIndex를 주었지만 결과는 같았다.
그런데 border: `1px solid red`는 적용된다? 

 

열심히 구글링,,한 결과 드디어 방법을 찾았다

 

바로 menuPortalTarget... 이 props에 body를 지정하면 된다

 

해결 완.