Search code examples
csstailwind-cssreact-select

react-select styles on select box

I am using this tailwindcss and i want to use the same css on the react-select Select tag.

className="block 
w-full 
px-3 
py-2 
rounded-md 
border 
border-gray-300 
text-gray-700 
focus:ring-indigo-500 
focus:border-indigo-500"

This react-select Select tag is working (I am using version 5.8.0):

<Select
closeMenuOnSelect={false}
isMulti
options={options}
placeholder="Type to search"
styles={customStyles}
/>

How do i get the customStyles right? The focus part is not working, i am still getting the default light blue color of react-select (see screenshot below).

const customStyles: StylesConfig = {
    control: (provided: Record<string, unknown>, state: any) => ({
      ...provided,
      display: "block",
      width: "100%",
      paddingLeft: "0.75rem",
      paddingRight: "0.75rem",
      paddingTop: "0.5rem",
      paddingBottom: "0.5rem",
      borderRadius: "0.375rem",
      borderWidth: "1px",
      borderColor: "border-gray-300",
      color: "text-gray-700",

      "&:focus": {
         //what do i put here
       },
    }),
  };

enter image description here

Solution

  • I managed to do it based on the documentation. The solution is to remove the provided and interrogate the state:

    const customStyles: StylesConfig = {
    control: (provided: Record<string, unknown>, state: any) => ({
      // ...provided,
      :
      :
      borderWidth: state.isFocused ? "2px" : "1px",
      borderColor: state.isFocused ? "black" : "#d1d1db",

    Cheers