몽충이 짓. `react-select`라이브러리 Custom 실수 연발

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화 분리 시켜야되겠다.
그 방법도 공식문서에 나와있으니, 분리시키면 다시 추가 블로그 작성하겠습니다 !!