flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Theme provider does not work for Button component customization

Open mkmule opened this issue 1 year ago • 2 comments

  • [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 theme provider
  2. Wrap children (layout)

Current behavior

Theme is NOT applying to Button component, but applies to Dropdown Button

Expected behavior

Theme should be applying to Button component AND Dropdown Button

Context

Override theme globally for all component used under specific layout. Next.js Application, app router.

Current behavior: image

Theme override

import { CustomFlowbiteTheme } from "flowbite-react";
import { Flowbite } from "flowbite-react";

const customTheme: CustomFlowbiteTheme = {
  button: {
    "size": {
      "md": "px-4 py-2 text-2xl",
    }
  }
} as CustomFlowbiteTheme;

export default function FlowbiteAppTheme({ children }: any) {
  return (
    <Flowbite theme={{ theme: customTheme }}>
      {children}
    </Flowbite>
  );
}

Actual usage in react component (page/screen)

      <div className="border-2 border-blue-100 p-4 flex gap-3">
        <Button outline color={'light'}>Test single</Button>

        <Button theme={customButtonTheme} outline color={'light'}>Test with theme as prop</Button>

        <Dropdown label={'Test in dropdown'} color={'light'}>
          <DropdownItem>Dolor Sit</DropdownItem>
          <DropdownItem>Lorem Ipsum</DropdownItem>
        </Dropdown>
      </div>
image

mkmule avatar Jul 10 '24 13:07 mkmule

Why does this not have more information? This is an on-going issue for me. Please fix ASAP. I can't have my UI looking like it has birth defects with some components applying theme some not.

vanta240i avatar Aug 09 '24 01:08 vanta240i

@m1daz the project is open source and every contribution here is made by volunteers. If you want to make a contribution to have it fixed a PR is very welcome. This is the best way to get it ASAP.

rluders avatar Aug 09 '24 06:08 rluders

@m1daz the project is open source and every contribution here is made by volunteers. If you want to make a contribution to have it fixed a PR is very welcome. This is the best way to get it ASAP.

So much for "not ASAP" because 4 months later, I'm revisiting this solely because the theming once again doesn't work in my application. Great.

I really just found a google search result that is my own complaining 4 months later.

vanta240i avatar Jan 03 '25 17:01 vanta240i

@m1daz Oh. Did I missed you PR that fixes it?

Anyway... The theme system will be replaced in the future. The docs says about the theme system: This feature is highly experimental. In the future, it could be deprecated or even suffer several changes.

I know that there is some work that will impact the theme system happening here: #1498

rluders avatar Jan 03 '25 17:01 rluders

Fixed by #1498 in [email protected] release.

SutuSebastian avatar Mar 26 '25 10:03 SutuSebastian