react-select 스타일 변경

개발하는 과정에서 react-select를 사용하면 쉽게 select - option 을 사용할 수 있다 하여 사용하게 되었다.

과정에서 스타일을 변경하려고 시도해 봤으나 쉽게 변경되지 않아 방법을 찾아서 간략하게 작성한다.

/**
   * react-select 스타일 변경
   * 해당방법 말고는 방법이 없다고 함
   * @type {{valueContainer: (function(*): *&{height: string}), singleValue: (function(*): *&{height: string}), control: (function(*): *&{height: string})}}
   */
  const customSelectStyle = {
    control: (provided) => ({
      ...provided,
      height: '50px',
    }),
    valueContainer: (provided) => ({
      ...provided,
      height: '50px',
    }),
    singleValue: (provided) => ({
      ...provided,
      height: '30px',
    }),
  };

아래는 적용 코드이다.

<Controller 
    name="unitType" 
    control={control} 
    render={({ field }) => ( 
      <Select 
        isClearable 
        {...field} 
        options={unitType.UNIT_PRICE_DATE} 
        value={unitTypes} 
        onChange={minAmountChange} 
        styles={customSelectStyle} 
      /> 
    )} 
/>

Controller는 react useForm사용시 register를 사용하기 위해 넣은 컴포넌트이다 (useForm 사용시 다른 라이브러리에 적용하려면 반드시 사용하여야 한다.)