themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.91k stars 427 forks source link

Theme provider does not work for Button component customization #1445

Open mkmule opened 4 months ago

mkmule commented 4 months ago

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
m1daz commented 3 months ago

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.

rluders commented 3 months ago

@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.