react-Calendar
에서 삽질을 하고난 후,select-Box
도 라이브러리를 사용하기로 마음먹고 캘린더와 동일하게style
을.css
파일을 생성해 작업했다.
그러나 이거 이렇게 하는거 아니였나봐....
난 왜 한번에 하지를 못할까ㅠ
만들어야하는 디자인이다.
일단 결과물 부터 보여주자면 동일하게 디자인을 만들진 않았지만, 마음에 든다.
css
파일을 생성했고, 열심히 개발자도구로 class
를 가지고와 스타일을 변경해줬다.
!important
를 사용해 해결했다.!important
를 선호하지 않는다.역시나 공식문서를 꼼꼼히 보지 않았다.
구글링해 블로그에 올라온 사용법들로 익힌 후, 해결했다.
진짜 반성해야된다.
한국인들은 설명서를 안 읽는 병이 있는거 아니냐고;; ㅋ
const options = [
{ value: 'hand', label: '손' },
{ value: 'hair', label: '헤어' },
{ value: 'fitting', label: '피팅' },
{ value: 'face', label: '얼굴' },
{ value: 'body', label: '전신' },
{ value: 'etc', label: '기타' },
];
<Select
styles={{
control: baseStyles => ({
...baseStyles,
height: '100%',
border: 'none',
fontSize: '1.5rem',
boxShadow: 'none',
caretColor: 'transparent',
':hover': {
border: 'none',
},
}),
option: baseStyles => ({
...baseStyles,
padding: '1.8rem 1.5rem',
color: '#4E4E53',
background: 'transparent',
':hover': {
background: '#250996',
color: '#EFEFF4',
cursor: 'pointer',
},
}),
multiValue: baseStyles => ({
...baseStyles,
padding: '.5rem 1rem',
background: '#250996',
fontSize: '1.6rem',
}),
multiValueLabel: baseStyles => ({
...baseStyles,
color: '#efeff4',
}),
multiValueRemove: baseStyles => ({
...baseStyles,
':hover': {
color: '#efeff4',
background: '#250996',
},
}),
placeholder: baseStyles => ({ ...baseStyles, color: '#bdbdc2' }),
input: baseStyles => ({ ...baseStyles, cursor: 'pointer' }),
}}
className={style.reactSelect}
classNamePrefix="react-select"
placeholder="카테고리를 선택해주세요."
options={options}
name="category"
closeMenuOnSelect={false}
components={{ IndicatorsContainer: () => null }}
isMulti
// onChange={onChangeInp}
// value={modelCategory}
/>
style option
style
의 option
으로 디자인을 수정이 가능하다.
control
: select box
의 디자인 변경option
: select box
를 눌렀을 때의 option
들의 디자인 변경option
들multiValue
선택된 option의 value값과 삭제버튼 전체의 디자인 수정multiValueLabel
: 선택된 option의 value값 디자인 수정multiValueRemove
: 선택된 option의 삭제버튼 디자인 수정classNamePrefix
: css파일로 변경하고 싶을 때, 웹에서 개발자모드에서 앞 부분에 className
을 지정해 준다.IndicatorsContainer
: null
값을 주게 되면 value값과 아이콘 사이의 구분선을 제거해 줄 수 있다.isMulti
을 명시하면 다중선택을 할 수 있다.다양한 디자인과 기능을 제공하고 그것을 내 입맛대로 커스텀할 수 있다.
그렇게 해서 내가 만든 결과물이 위의 사진으로 나타날 수 있다.
나중에 select
를 여러개 만들어놓으면 Component
화 분리 시켜야되겠다.
그 방법도 공식문서에 나와있으니, 분리시키면 다시 추가 블로그 작성하겠습니다 !!