Difficulty Overriding Default Styles in Flowbite React for Navbar Component

[avishkakavindu]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

1. Create a react typescript project.
2. Configure scss, tailwind and flowbite react
3. Create a Navbar component

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Navbar } from 'flowbite-react';

import logo from '@assets/images/logo_blue_bg_none.png';
import { ROUTE_PATHS } from '@routes/paths';
import { PrimaryButton } from '@components/common/buttons';

function PublicNavBar() {
  const location = useLocation();

  return (
    <div className="public-navbar-container">
      <Navbar fluid rounded className="public-navbar">
        <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center justify-between">
          <Navbar.Brand as={Link} href={ROUTE_PATHS.PUBLIC.HOME}>
            <img src={logo} className="mr-3 h-6 sm:h-9" alt="Logo" />
          </Navbar.Brand>

          <div className="flex-grow"></div>

          <div className="flex md:order-2">
            <PrimaryButton>Log In</PrimaryButton>
            <Navbar.Toggle />
          </div>

          <Navbar.Collapse>
            <Navbar.Link
              href="#"
              className={`public-navbar__link ${location.pathname === ROUTE_PATHS.PUBLIC.SIGN_IN ? 'public-navbar__link--active' : ''}`}
            >
              Home
            </Navbar.Link>
            <Navbar.Link
              as={Link}
              href="#"
              className={`public-navbar__link ${location.pathname === ROUTE_PATHS.PUBLIC.ABOUT ? 'public-navbar__link--active' : ''}`}
            >
              About
            </Navbar.Link>
            <Navbar.Link
              href="#"
              className={`public-navbar__link ${location.pathname === ROUTE_PATHS.PUBLIC.MEMBERSHIP ? 'public-navbar__link--active' : ''}`}
            >
              Membership
            </Navbar.Link>
            <Navbar.Link href={ROUTE_PATHS.PUBLIC.SIGN_IN}></Navbar.Link>
          </Navbar.Collapse>
        </div>
      </Navbar>
    </div>
  );
}

export default PublicNavBar;

navBar.scss

public-navbar-container {
  .public-navbar {
    &__link {
      color: red;
      &--active {
        @apply font-semibold text-primary-500;
      }

      &:hover {
        @apply font-semibold text-primary-500;
      }
    }
  }
}

5. Go to the page and check for custom styles.
6. Add !important and recheck

Current behavior

In the flowbite-react library, the default styles for the Navbar component are proving difficult to override. Specifically, the styles for the Navbar.Link elements cannot be customized as expected.

• Active Link Styling: When attempting to apply custom styles to the active link using the BEM convention and SCSS, the styles do not take effect unless !important is used, the applied styles do not reflect as expected.

• Usage of @apply: Tailwind CSS's @apply directive is used in the SCSS to apply utility classes for hover and active states, but these are not being applied correctly due to the specificity or !important styles in Flowbite’s CSS.

• Inline Styles as a Last Resort: This doesn't work either

Expected behavior

• Applying custom style class the styles must be there.

[SutuSebastian]

The best way to style any flowbite-react component is by passing className (which usually directs the prop to the root element of the component) and if the component has multiple internals/slots, use the theme prop.

In the docs each element has a theme section which u can follow and see what tailwind classes have been applied in order to style it.

[avishkakavindu]

@SutuSebastian I tried to use custom CSS classes that include @apply rules too but they failed to override default styles. So I used the theme prop instead, but this way I have to set styles like colour for each component by using theme styles. Is there a way to set the primary colour globally, the default colour is cyan.

[SutuSebastian]

An improved design system config is coming up, there's a lot of work involved and u'll be able to simply set a primary color in the tailwind.config.js file and it will apply in all components.

[avishkakavindu]

Will that be backwards compatible?

[SutuSebastian]

Will that be backwards compatible?

I'll try to keep as much as I can from the old API.

[avishkakavindu]

@SutuSebastian btw is the library stable enough to use in production-grade applications, or do we have to wait for the official release?

[SutuSebastian]

Best option would be to wait for v1.