Search code examples
reactjsmaterial-uistorybook

How to use MUI with Storybook?

I'm fairly new to ReactJS and I'm trying to use MUI components in Storybook. I was able to make a button using only web components but when I use MUI, the page displays blank.

screenshot

    // ./src/components/myButton.js

    import * as React from 'react';
    import Button from '@mui/material/Button';

    export default function myButton({ label }){
      return(
        <Button variant="contained">
          {label}
        </Button>
      )
    }

    // ./src/stories/myButton.stories.js

    import myButton from '../components/myButton'

    export default {
        title: "Button",
        component: myButton
    }

    const Template = (args) => <myButton {...args} />

    export const Primary = Template.bind({});
    Primary.args = { label: "Press me" }

How do I get this to work?

Solution

  • https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

    The first letter in a user-defined component must be capitalized otherwise react treats it like an html element. Change your import and function definition to a capital "MyButton" and let us know the results.