Search code examples
reactjstypescriptmaterial-uistorybook

Typescript validation issue when using Storybook with MUI

I have an Typescript validation issue when trying to pass args as children to a MUI button documented in Storybook :-(

enter image description here

enter image description here

Any ideas how I can pass this as children and not get a Typescript error? I assume it's unhappy as its not a ReactNode. TIA

Solution

  • The default Mui Button doesn't have a label property. https://mui.com/material-ui/api/button/ You need to extend the Mui Button Types. You can do something like:

    import {
  ButtonProps as MuiButtonProps,
} from '@mui/material/Button';

interface ButtonPropsOverrides {
  label?: string
}

export type ButtonProps = MuiButtonProps & ButtonPropsOverrides;

    Or do it like intended by Mui:

    export default {
  title: 'Atoms',
  component: Button,
  args: {
    children: 'Label',
  },
} as ComponentMeta<Shape>;

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

    Because the Mui Button is using children as the actual label.