4

Is there a way to style Flowbite react components? Like, how do i make the navbar transparent.

<Navbar fluid={true} rounded={true}></Navbar>

Njoroge Brian
  • 127
  • 3
  • 8

4 Answers4

2

I've had this issue before. The issue here is that NavBar itself does not accept a className prop. You can see this inside the typescript definition here: Omit<PropsWithChildren<ComponentProps<'nav'>>, 'className'> unless... wait... I just tried to find this piece of code in github and it was gone and className actually is accepted in the ts docs. As it turned out flowbite-react was just upgraded 7 days ago to v0.3:

https://github.com/themesberg/flowbite-react/commit/a7f839cc88e5c0beb1456d88f67b12d0b1b781cc

with the following commit message: enable classNames on components

All you have to do is upgrade the flowbite-react package

Flov
  • 1,527
  • 16
  • 25
1

You can style the Navbar and other Flowbite React components using the className prop.

For example, to make the navbar transparent, you can use the following TailwindCSS:

<Navbar fluid={true} rounded={true} className="bg-transparent"></Navbar>

See Navbar Source: https://github.com/themesberg/flowbite-react/blob/cdea61e56e89ee023e8a5daa4c1743692b8a3899/src/lib/components/Navbar/index.tsx#L18

TailwindCSS Background Color Docs: https://tailwindcss.com/docs/background-color

NOTE This is assuming you have setup TailwindCSS with Flowbite according this doc: https://flowbite.com/docs/getting-started/react/

segFault
  • 3,887
  • 1
  • 19
  • 31
  • Why my TailwindCSS does not work when I tried to set the bg-black alongside with Flowbite React? – Sauer Voussoir Sep 19 '22 at 10:25
  • It did not worked for me. – Ande Mohit Sep 25 '22 at 09:11
  • 1
    Sorry, but this ain't true. Looking the typescript definitions you can see that the flowbite-react class specifically omits the className prop inside the NavBar component. – Flov Oct 29 '22 at 08:08
  • @Flov Updated the answer, the code I originally linked to did in fact have `className` as an allowed prop... Not sure what happened after this answer though... – segFault Oct 29 '22 at 13:44
1

Try using class instead of className. It worked for me.

Luka
  • 21
  • 4
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 19 '22 at 07:56
-2

Flowbite React Documentation : https://www.flowbite-react.com/docs/customize/theme

Abhishek Mardiya
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 20 '23 at 12:31