我使用的是Flowbite React,它有很多很棒的元素,但是很多交互式组件在点击时都会有这个非常烦人的边框。你怎么才能摆脱它呢?这会让一个漂亮的组件变得丑陋,我不知道如何改变它。
在这里的例子中,我尝试使用标签。当查看页面底部的主题时,我看到边框来自“ring”属性,该属性设置为focus:ring-4 focus:ring-cyan-300
。我尝试将项目className设置为className="ring-0 focus:ring-0 focus:ring-transparent"
,但没有任何内容被覆盖,环仍然显示。
这是我的全部组成部分:
"use client";
import { Tabs } from "flowbite-react";
import {BsFillGrid3X2GapFill, BsFan} from 'react-icons/bs'
import { HiSignal } from "react-icons/hi2";
export default function ConfigureDeckTabs({
onTabChange,
}: {
onTabChange: (tab: number) => void;
}) {
return (
<Tabs.Group style="underline" onActiveTabChange={onTabChange} className="mt-2">
<Tabs.Item
active
icon={BsFillGrid3X2GapFill}
title="Panels"
className="ring-0 focus:ring-transparent focus:ring-8"
></Tabs.Item>
<Tabs.Item
icon={BsFan}
title="Fans"
className="ring-0 focus:ring-0 focus:ring-transparent"
></Tabs.Item>
<Tabs.Item
icon={HiSignal}
title="Sensors"
className="ring-0 focus:ring-0 focus:ring-transparent"
></Tabs.Item>
</Tabs.Group>
);
}
字符串
的数据
4条答案
按热度按时间ylamdve61#
这是一个框形阴影。也许可以添加类“shadow-none”。
svdrlsy42#
使用CSS覆盖样式
字符串
mbskvtky3#
使用CSS修改样式
字符串
c8ib6hqw4#
下面是我的解决方案:我已经覆盖了选项卡的默认样式,以自定义项目的外观。下面是一个演示我如何实现这一点的示例:
字符串
你可以看到,在tabs组件中,我已经覆盖了主题属性中的tabitmes,我指定了focus:ring-0,你可以删除它,它将正常工作,因为它根本不存在。