输入文本反应选择时出现意外的蓝色边框

Question

输入文本时出现意外的蓝色边框。请检查图像。我尝试通过将

control

设置为零或无来编辑

border

样式，甚至删除

boxShadow

。但没有任何效果。请检查图像。

control: (provided) => ({ ...provided, boxShadow: 'none', border: 0, }),

Answer 1

我发现了问题。我正在使用一个顺风插件

tailwindcss-forms

。它会覆盖某些输入的默认行为。所以有两种解决方案。

1. 从 tailwind.congif.js 文件中删除插件。基本上删除这一行

   require('@tailwindcss/forms')

   。
2. 如果你想保留这个插件。将其添加到您的父 css 文件中。例如index.css。

   input[type='text']:focus { box-shadow: none; }

Answer 2

如果你想在继续使用 tailwindcss-forms 的同时专门修改 react-select 输入样式，可以使用 classNamePrefix 属性。

<Select
    classNamePrefix="select2-selection"
    ...
/>

然后在您的 index.css 文件中添加以下内容：

.select2-selection__input:focus {
    box-shadow: none;
}

这将更改特定于 react-select 组件的输入样式。

Answer 3

要在键入时删除输入周围的蓝色框，请在选择标签中使用此框：

styles={{
          input: (base) => ({
                    ...base,
                    "input:focus": {
                         boxShadow: "none",
                         },
                  })
       }}

这将删除反应选择字段内输入的单独焦点。