The default background color of the modal does not appear about flowbite-react

[jotacollantes]

I already found the error, what happens is that when I sign in I show a modal in a component that does use the custom theme (is the only that use custom theme) because what I want is that only at the time of authentication the modal is shown and spinner without the background color. But apparently the rest of the modals that are in different components and that are used in other routes (pages) inherit the custom theme.

I share with you the code I use to customize the modal at the time of sign in.
https://gist.github.com/jotacollantes/ee0c892191ea3202ffa99049d1c5def3

Now that I remember between upgrade versions, more than once I have had to modify this custom theme. Apparently the theme keys changes when new versions are released.

Thank you very much for your help

[SutuSebastian]

Tested on fresh Vite + React project => works.

The issue here might be ur custom theme override in the <Flowbite theme={{ theme: customTheme }}> component, because a lot of things changed from version 0.6.x to 0.7.x, including the theme keys of the components.

I suggest u remove the custom theme, and test again.

Here's a functional flowbite-react + vite example:

https://stackblitz.com/edit/vitejs-vite-n3kwrs

[jotacollantes]

Hello Sutu, thanks for responding. I tell you that this is a NextJS 14.0.1 project and the code I use for the modal component is copied from the flowbite-react website and pasted as is. Since I had the problem of the date in the days of the week in the datepicker, the only thing I had to do was update the flowbite react dependency from version 0.6.4 to 0.7.2 and the modals lost their background color. The Modal components do not use any custom theme settings.

[SutuSebastian]

Sure, here's a Next.js fresh project with latest versions for all packages and a demo with the flowbite-react modal component. It works.

https://stackblitz.com/edit/stackblitz-starters-teolxc

[SutuSebastian]

Tested on fresh Vite + React project => works.

The issue here might be ur custom theme override in the <Flowbite theme={{ theme: customTheme }}> component, because a lot of things changed from version 0.6.x to 0.7.x, including the theme keys of the components.

I suggest u remove the custom theme, and test again.

Here's a functional flowbite-react + vite example:

https://stackblitz.com/edit/vitejs-vite-n3kwrs

Glad u found the problem, just like I suggested here 😄