1

I'm using Flowbite React, an dit has a lot of great elements, but many interactive component get this really annoying border when clicked. How do you et rid of it? This turns a beautiful component to an ugly one, and I can't figure out how to change it.

In the example here I am trying to use the tabs. When looking at the theme at the bottom of the page, I see that the border comes from the "ring" property which is set to focus:ring-4 focus:ring-cyan-300. I've tried setting my items className to this: className="ring-0 focus:ring-0 focus:ring-transparent" but nothing gets overridden and the ring still shows up.

This is my entire component:

"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>
  );
}

enter image description here

Tsabary
  • 3,119
  • 2
  • 24
  • 66
  • Please create a reproducible demo of the about output so that people here can look into your problem. – m4n0 Aug 06 '23 at 13:01
  • 1
    maybe you need to use [these tabs](https://flowbite.com/docs/components/tabs/) and use state to render details accordingly – Usama Aug 07 '23 at 10:30
  • 1
    @Usama thank you for the suggestion. It's not really a way to disable the border, but is indeed the approach I should take and have taken. With the "vanilla" tailwind I get the result I want now. – Tsabary Aug 07 '23 at 11:45

1 Answers1

0

It is a box-shadow. Maybe add the class "shadow-none".

Nico
  • 404
  • 6
  • 17