Custom theme not propagated within Storybook.js

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using Material-UI v5 within Storybook, the sx prop is picking up the default theme rather than the custom theme.

// theme.ts
import { createMuiTheme } from '@material-ui/core';

const palette = {
  primary: {
    main: '#ff69b4',
  },
};

export default createMuiTheme({ palette })

// .storybook/preview.js
import React from 'react'
import {ThemeProvider} from '@material-ui/core'
import {StylesProvider} from "@material-ui/core";


import theme from '../src/theme'

export const decorators = [
  (Story) => (
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    </StylesProvider >
  ),
]

// stories/Thing.stories.tsx
const Template: Story<Props> = () => {
  const theme = useTheme();
  console.log({ theme });
  return (
    <>
      <Thing />
      <Box
        sx={{
          p: 8,
          backgroundColor: 'primary.main',
        }}
      />
    </>
  );
};

The theme logged to the console contains the custom theme colour (#ff69b4)

primary: {main: "#ff69b4", light: "rgb(255, 135, 195)", dark: "rgb(178, 73, 125)", contrastText: "rgba(0, 0, 0, 0.87)"}

However, the background colour of the Box component is #3f51b5 (indigo.500)

Expected Behavior 🤔

Material UI components should pick up the custom theme when used within storybook.

Steps to Reproduce 🕹

Steps:

1. git clone https://github.com/robphoenix/mui-storybook
2. cd mui-storybook && yarn install
3. yarn storybook
4. View storybook in browser & check console output.

Context 🔦

I’m building a UI component library. Everything is working fine with v5 when I use my custom theme/components within create-react-app, however I now want to develop the components outside of an app and am using storybook to do so. However this is not possible if the custom theme is not picked up. Apologies if I’ve overlooked something obvious, after a day of debugging I can’t see the wood for the trees. 😄

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.0.1
  Binaries:
    Node: 15.2.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88 <-- used this browser
    Edge: Not Found
    Firefox: 75.0
    Safari: 14.0.1
  npmPackages:
    @emotion/react: ^11.1.2 => 11.1.4
    @emotion/styled: ^11.0.0 => 11.0.0
    @material-ui/core: ^5.0.0-alpha.22 => 5.0.0-alpha.22
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/styled-engine:  5.0.0-alpha.22
    @material-ui/styles:  5.0.0-alpha.22
    @material-ui/system:  5.0.0-alpha.22
    @material-ui/types:  5.1.4
    @material-ui/unstyled:  5.0.0-alpha.22
    @material-ui/utils:  5.0.0-alpha.22
    @types/react: ^17.0.0 => 17.0.0
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    typescript: ^4.1.3 => 4.1.3

[Overkloker]

@robphoenix I have a similar problem I get a theme in ThemeProvider but my components apply the default theme

It looks like Storybook wraps things using its own ThemeProvider that overwrites the MUI theme

It seems to be a problem with emotion

Try a solution that helped me preview.js

import { ThemeProvider as MUIThemeProvider, createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'emotion-theming';

const theme = createTheme({
    palette: {
        primary: {
            main: '#000000'
        },
        secondary: {
            main: '#ff00ff'
        }
    }
});

export const decorators = [
    (Story) => (
        <MUIThemeProvider theme={theme}>
            <ThemeProvider theme={theme}>
                {Story()}
            </ThemeProvider>
        </MUIThemeProvider>
    )
];

[Andarist]

Removing aliases in .storybook/main.js also works, like this:

module.exports = {
  stories: [
    '../src/**/**.stories.mdx',
    '../src/**/**.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
};