search

themesberg / flowbite-react

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

The default background color of the modal does not appear #1267

Closed jotacollantes closed 5 months ago

jotacollantes commented 5 months ago

With version 0.7.2

Captura de pantalla 2024-02-08 a la(s) 16 20 37

This worked until version 0.6.4

Captura de pantalla 2024-02-08 a la(s) 16 23 21

When deploying in vercel the following message appears: warning "flowbite-react > next-contentlayer@0.3.4" has incorrect peer dependency "next@^12 || ^13".

Regards

SutuSebastian commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

jotacollantes commented 5 months ago

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.

Captura de pantalla 2024-02-09 a la(s) 12 00 46

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 commented 5 months ago

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 😄