Styling React Select

readme.md

Styling React select

The trick lies in targetting each individual component and styling that.

In this example, it is the control, menu, menuList and option.

P.S: I wonder if we could potentially use Tailwind instead of Vanilla CSS. I haven't tried it yet.

index.ts

const MultiSelect = ({
  options,
  inputId,
  name,
  inputPlaceholder,
  ...rest
}: MultiSelectProps) => {
  return (
    <Select
      {...rest}
      components={animatedComponents}
      placeholder={inputPlaceholder}
      inputId={inputId}
      options={options}
      name={name}
      isMulti
      styles={{
        control: (base, state) => ({
          ...base,
          borderRadius: "8px",
          borderWidth: "2px",
          borderColor: state.isFocused ? "#045C5D" : "#EDEFF4",
          boxShadow: "none",
          fontSize: 14,
          padding: "0.25rem",
          "&:hover": {
            borderColor: "#045C5D"
          }
        }),
        menu: (base) => ({
          ...base,
          borderColor: "#F3F4F6",
          borderWidth: "1px",
          background: "white",
          boxShadow: "none"
        }),
        menuList: (base) => ({
          ...base,
          fontSize: "14px",
          borderRadius: "0.5rem",
          borderTopRightRadius: 0,
          borderTopLeftRadius: 0
        }),
        option: (base, state) => ({
          ...base,
          backgroundColor: state.isSelected ? "#045C5D" : "#fff",
          background: state.isFocused ? "#045C5D" : "#fff",
          color: state.isFocused ? "#fff" : "#525C76"
        })
      }}
    />
  );
};