themesberg / flowbite-react

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

Sidebar couldn't redesign its shape #1391

Open eryue0220 opened 1 month ago

eryue0220 commented 1 month ago

Steps to reproduce

My following code is:

import type { CustomFlowbiteTheme } from 'flowbite-react';
import { Flowbite, Sidebar } from 'flowbite-react';

const customTheme: CustomFlowbiteTheme = {
  sidebar: {
    root: {
      base: 'w-full h-64',
      inner: 'bg-white',
    },
  },
};

export default function Side() {
  return (
    <Flowbite theme={{ theme: customTheme }}>
      <Sidebar className="h-full">
        <Sidebar.Items>
          <Sidebar.ItemGroup>
            <Sidebar.Item href="#">Kanban</Sidebar.Item>
            <Sidebar.Item href="#">Inbox</Sidebar.Item>
            <Sidebar.Item href="#">Users</Sidebar.Item>
          </Sidebar.ItemGroup>
        </Sidebar.Items>
      </Sidebar>
    </Flowbite>
  );
}

Current behavior

The current width is still w-64 image

Expected behavior

The width should be reset to w-full;

Context

"flowbite": "^2.3.0", "flowbite-react": "^0.9.0",

eryue0220 commented 1 month ago

Updated: the style can be changed through className, but couldn't be changed by the above method.