언어/Next.js
[react-select] 리액트 셀렉트 커스텀하기
홍시_코딩기록
2024. 7. 13. 16:19
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을 추가했다.