[react-select] 리액트 셀렉트 커스텀하기

interface Option {
  value: string;
  label: string;
}



const customSelect = (isMain: boolean): StylesConfig<Option, false> => ({
  control: (base, state) => ({
    ...base,
    width: isMain ? "26rem" : "20rem",
    borderRadius: "1rem",
    background: state.isDisabled ? "#f6f6f6" : "rgba(255, 255, 255, 0.3)",
    boxShadow: "none",
    borderWidth: ".2rem",
    borderStyle: "solid",
    borderColor: state.isDisabled ? "#d9d9d9" : isMain ? "#fff" : "#000",
    color: isMain ? "#fff" : "#000",
    "&:hover": {
      borderColor: isMain ? "#fff" : "#000",
    },
    "@media (max-width: 767px)": {
      width: "100%",
    },
  }),
  placeholder: (base, state) => ({
    ...base,
    color: state.isDisabled ? "#d9d9d9" : isMain ? "#fff" : "#000",
  }),
  singleValue: (base) => ({
    ...base,
    color: isMain ? "#fff" : "#000",
  }),
  dropdownIndicator: (base, state) => ({
    ...base,
    color: state.isDisabled ? "#d9d9d9" : isMain ? "#fff" : "#000",
    transition: "all .2s",
    transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0deg)",
  }),
  indicatorSeparator: (base) => ({
    ...base,
    display: "none",
  }),
  menu: (base) => ({
    ...base,
    borderRadius: "1rem",
    padding: ".6rem 0 .8rem .6rem",
  }),
  option: (base, state) => ({
    ...base,
    minHeight: "3.6rem",
    width: "24.4rem",
    background: state.isSelected
      ? "#67794A"
      : state.isFocused
        ? "rgb(103, 121, 74, 0.8)"
        : base.background,
    color: state.isSelected || state.isFocused ? "#fff" : base.color,
    borderRadius: "1rem",
    "&:hover": {
      background: "rgb(103, 121, 74, 0.8)",
    },
    "&:active": {
      background: "#67794A",
    },
  }),
});

export default function DropDown({ isMain }: IPropsSelect) {

  const customStyle = customSelect(isMain);
  return (
    <RegionSelect isMain={isMain}>
      <Select
        instanceId="main_select"
        isSearchable={false}
        options={createOptions(AREA0)}
        value={selectedRegion}
        onChange={onChangeRegion}
        placeholder="광역시도 선택"
        styles={customStyle}
      />
      <Select
        instanceId="sub_select"
        isSearchable={false}
        options={subRegions}
        value={subRegionReset}
        onChange={onChangeSubRegion}
        placeholder="하위 지역 선택"
        isDisabled={subDisabled}
        styles={customStyle}
      />
    </RegionSelect>
  );
}

 

 

스타일 부분만 잘라서 올렸다.

 

리액트 셀렉트 플러그인을 사용해서 만들어보는 것까진 좋았는데 스타일 주는 것을 어떻게 주는지

찾아보면서 해야해서 그냥 커스텀을 할 걸 그랫나 싶기도 햇다,,

 

control : 셀렉트 박스

placeholder : placeholder

singleValue: 셀렉트 값 박스..라고 해야할까..?

dropdownIndicator: 화살표

indicatorSeparator: 화살표 왼쪽 선

menu: 목록 박스

option: 옵션 목록

 

나는 메인페이지와 아닌 페이지에 스타일을 다르게 주고 싶어서 isMain을 추가했다.