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

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

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

此外,请告诉我是否有任何有效的解决方案可以使用tailwind 来设置react-select 表单的样式,而无需求助于其他库,例如emotionstyled-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} />
          );
        };
        

        【讨论】:

          猜你喜欢
          • 2021-05-28
          • 2020-05-16
          • 1970-01-01
          • 1970-01-01
          • 2019-02-05
          • 2012-11-28
          • 1970-01-01
          • 2022-10-13
          • 2020-11-23
          相关资源
          最近更新 更多