reactjs 将Tailwind Forms插件与React Select一起使用

jvlzgdj9  于 2023-03-12  发布在  React
关注(0)|答案(4)|浏览(166)

我正在尝试将react-forms中的Select与tailwind css和tailwind forms插件(@tailwindcss/forms)集成。
只使用tailwind和react-select,表单可以正确呈现。但是,使用插件时,会出现一个轮廓。我希望tailwindcss表单不干扰react-select样式。有没有一个有效的解决方案允许react-select样式覆盖tailwind插件?

另外,如果有任何有效的解决方案可以使用tailwindreact-select表单进行样式化,而不需要求助于其他库(如emotionstyled-components),请告诉我。

fafcakar

fafcakar1#

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

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

/>
nwlls2ji

nwlls2ji2#

另外,请告诉我是否有任何有效的解决方案可以使用tailwind对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} />
  );
};
vuktfyat

vuktfyat3#

您可以使用插件的类策略,它将禁用额外的样式,但您需要为每个其他输入实现form-*类。
下面是它的文档。

toiithl6

toiithl64#

感谢@Bogdan的your answer,这确实起到了作用!🎉
接下来是作者的第二个问题,对于version 5.7.0,React Select允许通过classNames属性使用类进行样式化。下面是一个如何使用它的示例(来自他们的文档):

<Select
  classNames={{
    control: (state) =>
      state.isFocused ? 'border-red-600' : 'border-grey-300',
  }}
/>

我最近用Tailwind设计了React Select,它和预期的一样工作!我还使用了unstyled属性来消除默认的样式。参考可用组件列表来定位你想要设计的部分。为了值得,我还在我的实现上写了一个detailed article,如果这有任何帮助的话。
而且,我还发现了一种替代方法,可以用类样式方法覆盖Tailwind表单插件。由于React Select input键的目标是实际input元素的div,我们可以用Tailwind的任意变体来定位input元素:

<Select
  classNames={{
    input: () => "[&_input:focus]:ring-0"
  }}
/>

不过,我还是更喜欢Bogdan的原始解决方案,因为它更清楚地说明了正在发生的事情,但您的偏好可能会有所不同。

相关问题