如何在react-select中删除输入标签上的轮廓和框阴影

Question

我想在输入标签处于活动状态时删除蓝色轮廓和框阴影。

Answer 1

盒子阴影是由

@tailwindcss/forms

插件引入的。 表单插件的默认策略是在表单元素上全局应用样式。

您可以通过在

tailwind.config.js

文件中为插件指定不同的策略来更改此设置。

plugins: [
  ...
  require('@tailwindcss/forms')({
    strategy: 'class',
  }),
]

但是现在您必须在想要使用

form-[inputType]

插件设置样式的所有表单元素上应用

@tailwindcss/forms

类。

更多相关内容：https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

Answer 2

您需要传递自定义样式属性。

类似这样的事情

const customStyles = {
    control: (base, state) => ({
      ...base,
      height: "100%",
      minHeight: "100%",
      border: 0,
      boxShadow: "none",
    }),
    dropdownIndicator: (base, state) => {
      return {
        ...base,
      };
    },
    placeholder: (base, state) => ({
      ...base,
    }),
    singleValue: (base, state) => ({
      ...base,
    }),
    option: (base, state) => ({
      ...base,
    }),
  };


return (
  <Select 
   //REST OF YOUR PROPS
   styles={customStyles}
   isSearchable={false}   //This gets rid of the default cursor
  /> 
)

尝试使用

customStyles

对象来进一步设计它:)

Answer 3

默认样式源自主题对象，您可以像样式一样改变它。

主题对象也可用于样式功能。

    <Select
        label="Single select"
        options={user}
        theme={theme => ({
          ...theme,
          borderRadius: 'none',
          colors: {
            ...theme.colors,
            primary25: 'primary',
            primary: 'neutral5',
          },
        })}
      />

Answer 4

常量样式= { 控制：基础=>（{ ...根据， 边框：0， 盒子阴影：“无” }) };

Answer 5

老问题，但蓝色轮廓是输入字段本身的阴影（至少在我的情况下），我最终只是向选择字段添加了一个自定义类，例如

<ReactSelect
    title = { __( 'Title', 'lang' ) }
    className = { 'your-custom-class' }
...

然后用

来设计它

.your-custom-class input {
    box-shadow: none;
}

Answer 6

Akshay Kumar 的遮阳篷对我有用的另一种方法（顺风）：

input[id^="react-select-"] {
  @apply focus:outline-none focus:border-transparent focus:ring-0;
}

Answer 7

解决方案

将 React-Select 与 Tailwind Forms 集成时，您可能会遇到输入字段显示意外轮廓或框阴影的问题。此行为是由于 Tailwind Forms 插件应用的默认样式造成的，这可能与 React-Select 操作其输入元素的方式发生冲突。以下是解决此问题的两种有效方法：

选项 1：更改 Tailwind 形式注入策略

如果您更喜欢对表单样式进行精细控制并且可以接受更详细的代码，则可以将 Tailwind Forms 插件的样式注入策略从默认行为修改为基于类的方法。

第 1 步： 打开您的

tailwind.config.js

文件。

第2步：找到需要

@tailwindcss/forms

的插件部分。

第3步：将插件初始化替换为以下代码，以切换到基于类的策略：

module.exports = {
    ...
    plugins: [
        ...
        // Replace this line:
        // require('@tailwindcss/forms')
    
        // with this one:
        require('@tailwindcss/forms')({ strategy: 'class' }),
        ...
    ],
    ...
}

此调整可确保 Tailwind Forms 样式通过类应用，而不是影响全局所有表单元素。

选项 2：覆盖 React-Select 中的输入样式

对于那些对 Tailwind Forms 提供的默认样式感到满意，但希望消除输入字段上奇特的轮廓和框阴影的人，直接修改 React-Select 中的输入样式是一个简单的解决方案。

示例：定义 React-Select 组件时，添加

styles

属性来覆盖默认输入样式：

<Select
    ...
    styles={{
        input: (base) => ({
            ...base,
            "input[type='text']:focus": { boxShadow: 'none' },
        }),
        ...
    }}
/>

此方法专门针对 React-Select 中文本输入的焦点状态，消除任何框阴影并防止出现奇怪的轮廓。