[Bug] Dark theme not applied to `autodocs` pages.

[sharky98]

Describe the bug

Using @mui/material for the theme, the background is not updated in the stories of a autodocs page.

Steps to reproduce the behavior

1. Have a Storybook configured with docs: { autodocs: true } in main.ts.
2. Configure @storybook/addon-styling with @mui/material using the themes shown in the official recipe.
3. Start Storybook.
4. Navigate to the autodocs page.
5. Switch between light and dark mode.
6. The background does not change in the stories preview when going in dark mode.

Note, having dark mode as default theme does not change the behavior.

Expected behavior

When looking at the dark theme, the stories preview should have the background of the dark theme.

Screenshots and/or logs

(I wanted to upload images, but it seems my corporate proxy is blocking the uploader!)

See this repo to view the images: https://github.com/sharky98/storybookjs-addon-styling-issues-52

Environment

• OS: Windows 10
• Node.js version: v20.1.0
• NPM version: 9.6.4
• PNPM version: 8.6.2
• Browser (if applicable): Edge
• Browser version (if applicable): 114.0.1823.43

Additional context

Please ignore the MUI <AppBar /> that is floating at the top of the preview box. This is another issue I have... Unless you can help me on this too! :)

[ShaunEvening]

Hey @sharky98 👋

This looks like a tricky one! Material UI's styles only set the background-color on the body element which is not an inheritable property. Unfortunately this means that the stories in the docs have the background of the card they're rendered in.

The only ways that I can think to solve this are out of scope for this addon and gets tricky to get right for every case.

For the case of Material UI, I'd recommend writing a custom GlobalStyles component that uses CssBaseline as well as some style rules that target the story container in the docs with the .docs-story class.

Here's an example of a preview.tsx for you

// .storybook/preview.tsx

import {
  ThemeProvider,
  CssBaseline,
  css,
  GlobalStyles,
  useTheme,
} from '@mui/material';

import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { themes } from '../src/themes';

// css styles that can respond to the Material UI theme
const StorybookDocsOverride = (theme) => css`
  .docs-story {
    background-color: ${theme.palette.background.default};
  }
`;

// Component to render CssBaseline and adds your docs overrides
const GlobalStyles = () => {
  const theme = useTheme();
  const overrides = StorybookDocsOverride(theme);
  return (
    <>
      <CssBaseline />
      <GlobalStyles styles={overrides} />
    </>
  );
};

export const decorators = [
  withThemeFromJSXProvider({
    Provider: ThemeProvider,
    // Provide your custom global styles
    GlobalStyles,
    themes,
    defaultTheme: 'light',
  }),
];

[sharky98]

Thank you for taking the time to explain and give an example! 🙏 I was taken on another project, but will get back and test this as soon as I can.

Open question: I was wondering, since we are talking about the cards in the autodocs, would it be safer to use scoped css baseline instead? Or is the configuration taking care of that already by other means (like iframe)? I'll try to check the docs to figure that out by myself.

[ShaunEvening]

Any time 😃 I hope it helps! I'll close this issue for now but we can open it back up if this doesn't solve your problem when you have a chance to try it out.

I think you're fairly safe to use CssBaseline as the stories are rendered in an iframe. However, if you're noticing janky docs, moving to the scoped baseline might solve the problem.