react select memo

July 11, 2024

Table of Contents

react select

<Select
  options={statusOptionsArray}
  onChange={handleChange}
  styles={colorStyles}
  menuIsOpen={true} // これによりメニューが常に開いた状態になる
/>

styleのカスタム

type colorOptionType = OptionTypeBase & {
    isFixed?: boolean;
    isDisabled?: boolean;
  }
  const colorStyles: StylesConfig<colorOptionType, false> = {
    control: (styles: any, {isFocused }) => {
      return {
        ...styles,
        border: isFocused ? `1px solid ${color.main}` : styles.border,
        boxShadow: isFocused ? `0px 0px 6px ${color.main}` : "none",
        "&:hover": {
          border: `1px solid ${color.main}`,
          boxShadow: isFocused ? `0px 0px 6px ${color.main}` : "none",
        },
        minHeight: '42px'
      }
    },
    option: (styles: any, { isSelected, isFocused }) => {
      return {
        ...styles,
        backgroundColor: isFocused
          ? '#E5E6E8'
          : '#fff',
        // color: isDisabled
        //   ? '#ccc'
        //   : isSelected
        //     ? 'red'
        //     : data.color,
        ':active': {
          ...styles[':active'],
          backgroundColor: 'gray',
        },
      };
    }