flowbite
flowbite copied to clipboard
When using a wrapper component then Flowbite pages/components are not working
I created a website page template that sets my sites basic look and feel, but when I pass the main section as a CHILDREN prop then the Flowbite events do not fire. I did lot of experimentation and the culprite is the wrapper. Here is a basic example of how it is setup.
import { Component } from "solid-js";
// Define the layout component
const Layout: Component = (props) => {
return (
<div>
<header>
{/* Add header content here */}
</header>
<main>
{/* Render the page component here */}
{props.children}
</main>
<footer>
{/* Add footer content here */}
</footer>
</div>
);
};
// Define a page component
const HomePage: Component = () => {
return <h1>Welcome to my website!</h1>;
};
// Use the layout component to wrap the page component
const App: Component = () => {
return (
<Layout>
<HomePage />
</Layout>
);
};
If you set a simple button and tooltip within the Home Page it will not activate. But if you duplicate the exact same code into the App component directory or just comment out the "Layout" tags then it works just fine.
Is there something I'm just not configuring correctly? I even attempted to import flowbite into every component but it makes no difference. I tried setting this up in Stackblitz but it doesn't compile.
I also discovered that using lazy
loading breaks Flowbite as well. But my workaround for the whole issue is to put my code in the App.tsx and wrap my router with decorator code.
Related to: #530. Someone may find it useful!