Closed
Description
Steps to reproduce
Scenario 1:
- Create custom global Flowbite theme
- Wrap your page content in Flowbite component with theme passed as theme prop
- Launch Next.js dev server and perform Fast Refresh
- Notice no custom theme for any component
- Hard refresh
- Notice custom theme is applied as expected
Scenario 2:
- Create custom global Flowbite theme
- Wrap your page content in Flowbite component with theme passed as theme prop
- Launch Next.js dev server and open any Dropdown
- Notice no custom theme applied to Dropdown items
- Perform Fast Refresh
- Notice custom theme applied to Dropdown items
I assume both scenarios are somehow related to each other, hence no separate bug report.
Current behavior
Custom theme is hard to use during development. Also, Dropdowns avoid custom themes altogether.
Expected behavior
Custom theme to be applied as expected.
Context
I'm wrapping my Next.js app content in Flowbite component as follows:
layout.tsx
<body className={classNames(poppins.className, "dark")}>
<Flowbite theme={{ theme: theme }}>
<Navigation />
{children}
</Flowbite>
</body>
Running latest verion of Next.js, Flowbite and Tailwind.
tailwind.config.ts
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/configs/**/*.{js,ts,jsx,tsx,mdx}",
"node_modules/flowbite-react/lib/esm/**/*.js",
],
theme: {},
plugins: [require("flowbite/plugin")],
}
./src/configs/theme.ts contains the custom Flowbite theme
I have tried rendering all themed components with "use client", but this has no different results.
Metadata
Metadata
Assignees
Labels
No labels