MUI handles theme values with SSR quite well when used like
<Button color=’primary’>. The current state is when we want to access theme properties we add the hook const theme = useTheme() but this is a Client Only hook, we need something for SSR friendly. MUI offers CSS Variables that are SSR friendly and is most likely the way. Early tests showed promise, but required more tweaking for V1
A problem that we are currently facing is, on initial load for users with dark mode, the page will start in light mode then flicker to dark mode (bad UX)
Objective: Find a way / system to best use theme styles in server components
A good component to look at would be the Footer
MUI handles theme values with SSR quite well when used like
<Button color=’primary’>. The current state is when we want to access theme properties we add the hookconst theme = useTheme()but this is a Client Only hook, we need something for SSR friendly. MUI offers CSS Variables that are SSR friendly and is most likely the way. Early tests showed promise, but required more tweaking for V1A problem that we are currently facing is, on initial load for users with dark mode, the page will start in light mode then flicker to dark mode (bad UX)
Objective: Find a way / system to best use theme styles in server components
A good component to look at would be the Footer