css - 在 React Select 中使用 Tailwind Forms 插件

Question

我正在尝试整合 Select来自 react-forms使用 tailwind css 和 tailwind 表单插件 ( @tailwindcss/forms )。
只有顺风和 react 选择，表单才能正确呈现。但是，使用插件时，会出现一个大纲。我希望 tailwindcss 表单不干扰 react-select造型。是否有有效的解决方案允许react-select样式来覆盖顺风插件？

另外，请告诉我是否有任何有效的样式解决方案react-select使用 tailwind 的表格无需求助于其他库，例如 emotion或 styled-components .

Answer 1

您可以在聚焦时将输入框阴影设置为无

<Select
....
styles={{
  input: (base) => ({
    ...base,
    'input:focus': {
      boxShadow: 'none',
    },
  }),
}}

/>