我最近在我的Reaction应用程序中安装了FlowBit-Reaction，现在我整个应用程序中的所有输入域在聚焦时都有一个蓝色的轮廓.即使当我应用样式删除轮廓时，似乎也没有什么效果.
一切都安装好了，我把配置和插件添加到了TailWindcss中.
这是一个有人遇到过的问题吗？
Here is a screenshot of inspecting the element:
I found this style when inspecting the element:
--tw-ring-color is the issue
我try 将其添加到index.css，它使轮廓变小，但它仍然在那里
* {
--tw-ring-color: rgb(0 0 0 / 0) !important;
}
Kyle Xyian Dilbeck解决方案适用于Flowbit包装纸.如果要添加内联样式，请执行以下操作:
焦点:边框透明或您 Select 的 colored颜色 ，蓝色戒指将被移除
环内联类仍然没有删除它.
100并且它的工作情况符合预期！当你安装一个像Flowbit这样的UI库时，就会应用它们的默认样式.
你看到的蓝色轮廓是由于Flowbit-Reaction或TailWind CSS应用的default focus styles.删除此大纲的一种方法是使用TailWind CSS或更具体地说changing the 101 style. If you add ring-0 it should effectively remove it. 100提供的Outline-None实用程序类
因为FlowBit使用tailwind css，所以我们将更新tailwind 样式.它目前正在通过"戒指 colored颜色 "来应用这种风格，你可以通过几种方式改变它，这里有两个主要的例子(flowbite docs推荐):
前男友.1:更改为红色
<input className="ring-2 ring-blue-500 focus:ring-red-500" type="text" />
前男友.2:将其完全移除
<input className="ring-0 focus:ring-transparent" type="text" />
Above是FLOBIT REACT提供的第一个选项.Below是第二个可以创建自定义主题的地方--see documentation here.
通过flowbite theme wrapper从组件中的所有输入中删除环 colored颜色
import type { CustomFlowbiteTheme } from 'flowbite-react';
import { Flowbite } from 'flowbite-react';
const customTheme: CustomFlowbiteTheme = {
input: {
ringColor: 'ring-transparent focus:ring-transparent',
},
};
export default function MyPage() {
return (
<Flowbite theme={{ theme: customTheme }}>
<input className="ring-2 focus:ring-2" type="text" />
</Flowbite>
);
}
PS:
如果有效，那么不要忘记将您的问题标记为已回答！
另外，如果你喜欢我的解决方案，并认为它显示了良好的研究，我会很感激的upvote！