将 Tailwind Forms 插件与 React Select 结合使用

Question

我正在尝试Select与react-formstailwind css 和 tailwind 表单插件 ( @tailwindcss/forms) 集成。

仅使用顺风和反应选择，表单就可以正确呈现。但是，使用该插件后，会出现轮廓。我希望 tailwindcss 表单不干扰react-select样式。是否有有效的解决方案允许react-select样式覆盖 tailwind 插件？

此外，请告诉我是否有任何有效的解决方案可以在不求助于其他库（例如或 ）的情况下react-select使用样式化表单。tailwindemotionstyled-components

Answer 1

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

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

/>