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

Posted 2023-03-06

【中文标题】将 Tailwind 表单插件与 React Select 一起使用

【英文标题】：Using Tailwind Forms Plugin with 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。

【参考方案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 />
  );
;