Storybook docs page is not working with MUI v5

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Storybook docs do not render with material UI components. I think there is an issue with the ThemeProvider, but I cannot seem to figure it out.

https://temurih.github.io/temp/?path=/docs/inputs-textfield--default

// theme.tsx
import { createTheme, ThemeOptions, ThemeProvider } from '@mui/material/styles';

export const themeObject: ThemeOptions = createTheme({
    palette: {
        primary: {
            main: '#171717',
        },
        secondary: {
            main: '#757575',
        },
    },
});

export const Theme: FC = ({ children }) => (
    <ThemeProvider theme={themeObject}>{children}</ThemeProvider>
);

// preview.js
import { StylesProvider } from '@mui/styles';
import { Theme } from "../src/theme";

export const parameters = {
    // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
    actions: { argTypesRegex: '^on.*' },
};

export const decorators = [
    (Story) => (
        <StylesProvider injectFirst>
            <Theme>
                <Story />
            </Theme>
        </StylesProvider >
    ),
]

// story
import { Meta, Story } from '@storybook/react';
import { Input, InputProps } from '../src';

const meta: Meta = {
    title: 'Inputs/Textfield',
    component: Input,
    argTypes: {},
    parameters: {
        controls: { expanded: true },
    },
};
export default meta;
const Template: Story<InputProps> = (args) => {
    const [value, setValue] = useState<string>('');
    return <Input {...args} value={value} onChange={setValue} />;
};
export const Default: Story<InputProps> = Template.bind({});
Default.args = {
    placeholder: 'placeholder',
    label: 'Label',
};

Expected behavior 🤔

Storybook docs page should render fine. I am using MUI v4 in my other projects with the same setup, and it seems to be working fine there.

Solutions I tried:

• https://github.com/storybookjs/storybook/issues/15879#issuecomment-903113957
• https://github.com/storybookjs/storybook/issues/16099#issuecomment-951854953
• https://github.com/storybookjs/storybook/issues/16099#issuecomment-950179264

Steps to reproduce 🕹

Steps:

You can view the storybook page here:

• https://temurih.github.io/temp/?path=/story/inputs-textfield--default
• Click on the Docs tab

Or build it locally,

1. git clone https://github.com/temurih/temp
2. cd temp && yarn
3. yarn storybook

Context 🔦

I am trying to build a component library with storybook.

Similar issue: https://github.com/mui-org/material-ui/issues/24282

Your environment 🌎

`npx @mui/envinfo`

    System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 16.0.0 - ...\node.EXE
    Yarn: 1.22.4 - ...\Yarn\bin\yarn.CMD
    npm: 7.10.0 - ...\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Spartan (44.22000.120.0), Chromium (97.0.1072.62)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled:  11.6.0
    @mui/base:  5.0.0-alpha.65
    @mui/material: ^5.3.0 => 5.3.0
    @mui/private-theming:  5.2.3
    @mui/styled-engine:  5.3.0
    @mui/styles: ^5.2.3 => 5.2.3
    @mui/system:  5.3.0
    @mui/types: ^7.1.0 => 7.1.0
    @mui/utils:  5.3.0
    @types/react: ^17.0.38 => 17.0.38
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.5.4 => 4.5.4

[temurih]

@mnajdova there is something called proof-reading and double-checking your work, maybe try it next time, instead of being too eager to close an issue so that no one else can see or respond. I hope that helps!

[mnajdova]

@mnajdova there is something called proof-reading and double-checking your work, maybe try it next time, instead of being too eager to close an issue so that no one else can see or respond. I hope that helps!

Sure will do, thanks for the suggestion. If we were eager to close issue always, we wouldn’t have any open issues, no? It was an honest mistake to link the same issue, still the duplicate issue policy apply and is correctly linked now.

In the end people should learn to be more appreciating the work done by the open source community, instead of picking a conflict for a mistake done on one of the issues. I don’t see how it can be productive.