css Question posted in
Some basic documentation can be found here.

Css – 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    To customize the focus style in React-Select using Tailwind CSS, you can update the &:focus section in your customStyles object. You can use the ring and border utilities provided by Tailwind CSS for the focus styles. Here’s how you can modify the customStyles:

    import { StylesConfig } from 'react-select';

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': {
      borderColor: 'focus:border-indigo-500',
      boxShadow: 'focus:ring-indigo-500',
    },
  }),
};

// ...

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

    In the &:focus section, I added the borderColor and boxShadow properties to mimic the focus styles using the Tailwind CSS utility classes. Adjust the color values according to your Tailwind CSS configuration. This should override the default focus styles and apply the styles you specified in the customStyles object.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search