选择框上的反应选择样式

Question

我正在使用这个

tailwindcss

并且我想在

react-select

选择标签上使用相同的CSS。

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"

这个

react-select

选择标签正在工作（我使用的是5.8.0版本）：

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

我如何获得正确的

customStyles

？ 焦点部分不起作用，我仍然得到默认的蓝色/青色

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": {
         //what do i put here
       },
    }),
  };

Answer 1

要使用 Tailwind CSS 自定义 React-Select 中的焦点样式，您可以更新

&:focus

对象中的

customStyles

部分。您可以使用 Tailwind CSS 提供的

ring

和

border

实用程序来设置焦点样式。以下是修改

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}
/>

在

&:focus

部分，我添加了

borderColor

和

boxShadow

属性以使用 Tailwind CSS 实用程序类模仿焦点样式。根据您的 Tailwind CSS 配置调整颜色值。这应该覆盖默认焦点样式并应用您在

customStyles

对象中指定的样式。