styled gets empty theme values

[evertheylen]

See here for a demo. In short, a component like this:

const StyledDemo = styled('div')(({ theme }) => {
  console.log('THEME IS (styled)', theme);
  ...
})

will show an empty-ish theme value with many undefined keys (e.g. typography, palette, shadows, ...). However, if I build an otherwise identical component with useTheme like this:

const UseThemeDemo = (props) => {
  const theme = useTheme();
  console.log('THEME IS (useTheme)', theme);
  ...
};

It will log an much more "full" theme value as I would expect. I do believe this is the behaviour we want. Here are both logs:

Interestingly, this bug seems to affect the second demo on the SUID docs on styled. The styled button does not appear because Uncaught TypeError: theme.palette is undefined.

I've tried different versions of SUID/Solid but for some reason I can't find a combination that works. I've also tried explicitly setting a theme with ThemeProvider but that doesn't change anything to the "empty" theme values. I've also tested this on both chrome and firefox.

[juanrgm]

That result is correct.

Look at the same example but with @mui/material.

https://stackblitz.com/edit/react-ehhmhi?file=demo.tsx

[evertheylen]

I am confused now. Is the empty theme expected behaviour? Then why does the styled demo on the SUID docs not work? The only difference there is that the styled component is wrapped in a ThemeProvider. Even then, I get an empty theme.

So to reiterate:

• The second demo of styled, as present on the docs, does not work in stackblitz. You can click the little lightning icon on the docs or open this stackblitz
• That same second demo of styled does seem to work with older versions of SUID. I used the old but still running docs at next.suid.io which gave me this stackblitz
• I updated my own example with a ThemeProvider, but I get almost the same result: the theme in styled does not contain my typography settings, while it does in useTheme.

I will admit I'm not entirely clear on how themes work, esp when only a few things are specified (e.g. in the example above I only specify typography.fontSize). I kind of expect it to "merge" with some default theme so that all possible keys have a sensible default, but that may not be expected behaviour. Regardless, I do believe the current behaviour is broken, seeing that a demo on the docs site is broken.

[juanrgm]

This is a issue with Vite in develop mode (vitejs/vite#3301). In the past I tried to fix it, but no luck.

The problem is that Vite reloads the context files when they are called from differents paths, so the theme context is recreated and its reference too.

Now I know how fix it, thanks for report it.

[juanrgm]

Closed via c5f7ab0.

[evertheylen]

Thanks a lot! I will add "does the error only occur in vite develop mode" to my bug checklist :)