Material UI TypeScript props not auto generated with autodocs

[anthonyma94]

Summary

I'm following the blog post from here with Storybook v9 and MUI v7. I got the theme itself working, but prop types aren't being auto generated. I even copied the exact component just to double check.

main.ts

import type { StorybookConfig } from "@storybook/react-vite";
import react from "@vitejs/plugin-react";

import { mergeConfig } from "vite";
import { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
    return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
    stories: ["../**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        getAbsolutePath("@chromatic-com/storybook"),
        getAbsolutePath("@storybook/addon-docs"),
        getAbsolutePath("@storybook/addon-a11y"),
        getAbsolutePath("@storybook/addon-vitest"),
        getAbsolutePath("@storybook/addon-themes"),
    ],
    framework: {
        name: getAbsolutePath("@storybook/react-vite"),
        options: {},
    },
    typescript: {
        reactDocgen: "react-docgen-typescript",
        reactDocgenTypescriptOptions: {
            compilerOptions: {
                allowSyntheticDefaultImports: false,
                esModuleInterop: false,
            },
            shouldExtractLiteralValuesFromEnum: true,
            shouldRemoveUndefinedFromOptional: true,
            propFilter: (prop) =>
                prop.parent
                    ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
                    : true,
        },
    },
    viteFinal: async (config) => {
        return mergeConfig(config, {
            plugins: [react()],
        });
    },
};
export default config;

preview.tsx

import type { Preview } from "@storybook/react-vite";
import { withThemeFromJSXProvider } from "@storybook/addon-themes";

import { theme } from "../src/theme";
import { createTheme, ThemeProvider, CssBaseline } from "@mui/material";
import { makeStorybookDecorator } from "./makeStorybookDecorator";
import { initialize, mswLoader } from "msw-storybook-addon";

const userTheme = {
  light: createTheme(theme.light),
  dark: createTheme(theme.dark),
};

initialize();

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      expanded: true,
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  tags: ["autodocs"],
  loaders: [mswLoader],
  decorators: [
    withThemeFromJSXProvider({
      themes: userTheme,
      defaultTheme: "light",
      Provider: ThemeProvider,
      GlobalStyles: CssBaseline,
    }),
  ],
};

export default preview;

Button.tsx

import MuiButton, {
  type ButtonProps as MuiButtonProps,
} from "@mui/material/Button";

export interface ButtonProps extends MuiButtonProps {
  label: string;
}

export const Button = ({ label, ...rest }: ButtonProps) => {
  return <MuiButton {...rest}>{label}</MuiButton>;
};

Button.stories.tsx

import { Button } from "./Button";
import type { Meta, StoryObj } from "@storybook/react-vite";
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof Button>;
export const Default: Story = {
  args: {
    label: "Hello World",
  },
};

result

There should be way more props, but only component is showing for some reason. If anyone can help me out I'd appreciate it!

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Hi @anthonyma94! I'm Dosu and I’m helping the storybook team.

This is a known limitation with Storybook's prop extraction when using Material UI and TypeScript. The underlying issue is that react-docgen-typescript (which Storybook uses for autodocs) often can't extract inherited props from third-party libraries like MUI, even with custom propFilter settings. This is due to how MUI structures its types and how react-docgen-typescript processes external type definitions, not a misconfiguration in your setup.

Recent Storybook releases (v9+) and updates to vite-plugin-react-docgen-typescript (now at 0.6.1 for Vite 7 compatibility) may help in some cases, so make sure you're on the latest versions of both Storybook and the plugin (source). However, even with the latest versions, full prop extraction from MUI components is not guaranteed (source).

Workarounds:

• Manually document important props using JSDoc comments or Storybook's MDX/DocsPage features.
• Explicitly re-declare key inherited props in your custom component interface if you want them to show up in autodocs.
• Add a link to the relevant MUI documentation in your Storybook docs panel for reference.

Keep an eye on Storybook and react-docgen-typescript release notes for future improvements in this area.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[enzo-billis]

I've got the same issue with React-Vite and Chakra UI. Still waiting for a fix