Skip to content

Instantly share code, notes, and snippets.

@adeleke5140
Last active December 27, 2023 22:09
Show Gist options
  • Save adeleke5140/35836d1350d302e8a17b7c3ada7790c8 to your computer and use it in GitHub Desktop.
Save adeleke5140/35836d1350d302e8a17b7c3ada7790c8 to your computer and use it in GitHub Desktop.
Styling React Select

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.

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"
})
}}
/>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment