Different modes within nested providers in @mui/joy
11:18 27 Nov 2023

Joy-UI is certainly a joy to work with!

However, I'm having problems when trying to use different modes (light/dark) within nested providers. When calling setMode within a nested provider I was expecting it to only toggle the mode in the nearest provider, but that does not seem to be the case. It changes both the parent's and nested provider's mode.

I've tried using different keys for the provider storages as well as using disableNestedContext without luck.

Here is small example:


     {setMode("light") /* Top provider is now light */}
  
     {setMode("dark") /* Both providers are now dark, but the parent should be light */}
  

Also a live demo here:

Live demo

Thanks in advance!

material-ui joy-ui