How to use MUI with Storybook?

user_19557008 0
Viewed 138

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?

storybook material-ui reactjs
2 Answers

You can use it just like this:

import { text } from '@storybook/addon-knobs';
import myButton from '../components/myButton'

export const normal = () => {    
  const content = text('Text', 'Click me');
  return (
    <myButton>
      {content}
    </myButton>
  );
};
user_115721550
user_112093370
Related