Storybook props not showing for MUI (Material UI) components

So I am trying to display MUI components (I'm not extending them or anything) on Storybook along with the Docs. I am unable to have the props be automatically shown and detected.

Here is an example of using the MUI Button:

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import  Button  from  '@mui/material/Button';;

export default {
  title: 'Button',
  component: Button,
} as ComponentMeta<typeof Button>;


const Template: ComponentStory<typeof Button> = (args) => <Button {...args} >Button</Button>;

export const Primary = Template.bind({});
Primary.args = {
};

In this case, the button is display, but the controls panel is empty (not showing any props). If I replace the Button component with a wrapper around a normal HTML button, like this:

import React, { Component } from 'react';

class Button extends Component<React.HTMLAttributes<HTMLButtonElement>, {}> {
    public render() {
        return (<button></button>); 
    }
}

export default Button;

With this, all the props are shown. I even modified the propFilter function in main.js to show all props:

//main.js 
module.exports = {
  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    '@storybook/addon-controls'],
  "framework": "@storybook/react",
  core: {
    builder: "webpack5"
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        return true
      },
    },
  }
};

Here are my dependencies:

{
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-typescript": "^7.17.12",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-docs": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "babel-loader": "^8.2.5",
    "fork-ts-checker-webpack-plugin": "^7.2.11",
    "jest": "^28.1.1",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "publishConfig": {
    "registry": "http://artifacts.cloud.bamfunds.net/repository/bam-npm/"
  },
  "peerDependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/material": "^5.8.4",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0"
  },
}

Recommended topics

Hot tags