How to style Flowbite React Components in React(issue with Tabs component)

Question

<Tabs aria-label="Tabs with underline" variant="underline">
            <Tabs.Item active title="Profile" icon={HiUserCircle}>
              This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Dashboard" icon={MdDashboard}>
              This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Settings" icon={HiAdjustments}>
              This is <span className="font-medium text-gray-800 dark:text-white">Settings tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
            <Tabs.Item title="Contacts" icon={HiClipboardList}>
              This is <span className="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</span>.
              Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
              control the content visibility and styling.
            </Tabs.Item>
          </Tabs>

I want to change base style of icons, text next to them and outline, when clicked from blue to #80143c Also interested in how can I change other colors, cause classname doesn't work here here's how it looks like now

-tried to change color with a classname(had no effect, also tried class) -tried to do it through root(crash) -tried inner color property(no effect again)

Answer 1

You can write a className for Tabs tag & Iterate Button tag to change styles.

I have added tabsContainer as className below & changed button styles from the parent tag.

<Tabs aria-label="Default tabs" className="tabsContainer" variant="default">

CSS:-

.tabsContainer button:focus {
  color: #80143c;
}