将 Tailwind 表单插件与 React Select 一起使用答案

【问题标题】：Using Tailwind Forms Plugin with React Select将 Tailwind 表单插件与 React Select 一起使用
【发布时间】：2021-09-09 05:22:34
【问题描述】：

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

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

此外，请告诉我是否有任何有效的解决方案可以使用tailwind 来设置react-select 表单的样式，而无需求助于其他库，例如emotion 或styled-components。

【问题讨论】：

标签： css reactjs tailwind-css react-select

【解决方案1】：

您可以将焦点设置为输入框阴影为无

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

/>

【讨论】：

【解决方案2】：

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

这是documentation。

【讨论】：

【解决方案3】：

另外，如果有任何有效的解决方案，请告诉我用于使用顺风设计 react-select 表单而不诉诸于其他库，例如情感或样式组件。

这个问题的答案是使用这个库 https://github.com/ben-rogerson/twin.macro

例如，你可以这样做：

import tw from 'twin.macro';
import ReactSelect, { Props } from 'react-select';

const Styled = {
  Select: tw(ReactSelect)`rounded-lg text-center border-2`
};

const Select: React.FC<Partial<Props>> = (props) => {
  return (
    <Styled.Select {...props} />
  );
};

【讨论】：