在React Select中使用Tailwind Forms插件

Question

我正在尝试集成来自react-forms的Select与顺风css和顺风表单插件(@tailwindcss/forms)。

只有顺风和react-select，表单才能正确呈现。但是，使用该插件时，会出现一个轮廓。我希望tailwindcss表单不会影响react-select样式。有没有一个有效的解决方案来允许react-select样式覆盖顺风插件？

​

​

此外，请让我知道是否有任何有效的解决方案来使用tailwind样式的react-select表单，而不求助于其他库，如emotion或styled-components。

Answer 1

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

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

/>

Answer 2

你可以对插件使用类策略，它会禁用额外的样式，但是你需要在每一个其他的输入中实现form-*类。

这是它的documentation。