themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS

Home Page:https://flowbite-react.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sidebar couldn't redesign its shape

eryue0220 opened this issue · comments

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

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",

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