Repository: storybook
Issue: [Bug]: Docs for MUI  (Material UI) don't work with storybook v.7.6.10
Labels: bug,question / support,react,has workaround,mui,builder-vite,argtypes

### Describe the bug

I followed everything instructed in the [recipe](https://storybook.js.org/recipes/@mui/material?ref=storybookblog.ghost.io), nothing works, nothing appeared. Both with Vite and Webpack

### To Reproduce

Follow the [recipe](https://storybook.js.org/recipes/@mui/material?ref=storybookblog.ghost.io)

### System

```bash
System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm <----- active
    pnpm: 8.6.9 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.234
    Edge: 120.0.2210.144
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-designs: ^7.0.9 => 7.0.9 
    @storybook/addon-essentials: ^7.6.10 => 7.6.10 
    @storybook/addon-interactions: ^7.6.10 => 7.6.10 
    @storybook/addon-links: ^7.6.10 => 7.6.10 
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10 
    @storybook/addon-themes: ^7.6.10 => 7.6.10 
    @storybook/blocks: ^7.6.10 => 7.6.10 
    @storybook/react: ^7.6.10 => 7.6.10 
    @storybook/react-vite: ^7.6.10 => 7.6.10 
    @storybook/test: ^7.6.9 => 7.6.10 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.9 => 7.6.10
```


### Additional context

The follow codes are written for my `button.stories.tsx`
```
import {Meta} from '@storybook/react'
import Button from './button.component'

export default {
  title: 'Inputs/Buttons',
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Button>

export const Default = () => <Button variant="outlined">Default</Button>,
  Primary = () => <Button>Primary</Button>,
  Secondary = () => <Button color="secondary">Secondary</Button>

```

The `button.component.tsx` (same as in the recipe):
```
import React from 'react';
import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material';

// Only include variant, size, and color
type ButtonBaseProps = Pick<MuiButtonProps, 'variant' | 'size' | 'color'>;

// Use all except disableRipple
// type ButtonBaseProps = Omit<MuiButtonProps, "disableRipple">;

export interface ButtonProps extends ButtonBaseProps {
  label: string;
}

export const Button = ({ label, ...rest }: ButtonProps) => <MuiButton {...rest}>{label}</MuiButton>;
```

Then main.ts
```
import type {StorybookConfig} from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-themes',
  ],
  staticDirs: ['../public'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  typescript: {
    check: false,
    reactDocgen: 'react-docgen',
    reactDocgenTypescriptOptions: {
      // Speeds up Storybook build time
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      // Makes union prop types like variant and size appear as select controls
      shouldExtractLiteralValuesFromEnum: true,
      // Makes string and boolean types that can be undefined appear as inputs and switches
      shouldRemoveUndefinedFromOptional: true,
      // Filter out third-party props from node_modules except @mui packages
      propFilter: (prop: any) =>
        prop.parent
          ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,
    },
  },
}
export default config

```

For `preview.ts`:
```
import CssBaseline from '@mui/material/CssBaseline/CssBaseline';
import ThemeProvider from '@mui/material/styles/ThemeProvider';
import responsiveFontSizes from '@mui/material/styles/responsiveFontSizes';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import createTheme from '@mui/material/styles/createTheme';
import { themes } from '@storybook/theming';

import * as theme from '../src/themes/theme'
import '@fontsource/material-icons';


export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  sidebar: {
    showRoots: false,
  },
  docs: {
    theme: themes.light,
  },
  controls: {
    expanded: true,
    hideNoControlsWarning: true,
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: responsiveFontSizes(createTheme(theme.getDesignTokens('light'))),
    dark: responsiveFontSizes(createTheme(theme.getDesignTokens('dark'))),
  },
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles: CssBaseline,
})];

```


MUI v. 5.15.2 and emotion 11.11.3