我正在尝试将react-forms
中的Select
与tailwind css和tailwind forms插件(@tailwindcss/forms
)集成。
只使用tailwind和react-select,表单可以正确呈现。但是,使用插件时,会出现一个轮廓。我希望tailwindcss表单不干扰react-select
样式。有没有一个有效的解决方案允许react-select
样式覆盖tailwind插件?
另外,如果有任何有效的解决方案可以使用tailwind
对react-select
表单进行样式化,而不需要求助于其他库(如emotion
或styled-components
),请告诉我。
4条答案
按热度按时间fafcakar1#
聚焦时,可以将输入的框阴影设置为无
nwlls2ji2#
另外,请告诉我是否有任何有效的解决方案可以使用tailwind对react-select表单进行样式化,而无需求助于其他库,如情感库或样式化组件库。
对此问题的答案是使用https://github.com/ben-rogerson/twin.macro库
例如,你可以这样做:
vuktfyat3#
您可以使用插件的类策略,它将禁用额外的样式,但您需要为每个其他输入实现
form-*
类。下面是它的文档。
toiithl64#
感谢@Bogdan的your answer,这确实起到了作用!🎉
接下来是作者的第二个问题,对于version 5.7.0,React Select允许通过
classNames
属性使用类进行样式化。下面是一个如何使用它的示例(来自他们的文档):我最近用Tailwind设计了React Select,它和预期的一样工作!我还使用了
unstyled
属性来消除默认的样式。参考可用组件列表来定位你想要设计的部分。为了值得,我还在我的实现上写了一个detailed article,如果这有任何帮助的话。而且,我还发现了一种替代方法,可以用类样式方法覆盖Tailwind表单插件。由于React Select
input
键的目标是实际input
元素的div
,我们可以用Tailwind的任意变体来定位input元素:不过,我还是更喜欢Bogdan的原始解决方案,因为它更清楚地说明了正在发生的事情,但您的偏好可能会有所不同。