在Storybook中使用MUI按钮传递args作为子元素时遇TypeScript校验问题

常见原因与对应解法 #

1. 显式声明args类型为ReactNode #

Storybook默认args类型不够精确，直接给args指定React.ReactNode类型，匹配MUI按钮children的类型要求：

import { Meta, StoryObj } from '@storybook/react';
import Button from '@mui/material/Button';
import React from 'react';

const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    children: '点击我' as React.ReactNode,
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {};

2. 用argTypes约束子元素类型 #

通过argTypes明确指定children的类型，让Storybook的类型校验更精准：

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    children: {
      type: 'string',
      control: 'text',
    },
  },
};

3. 包装非ReactNode内容为合法元素 #

如果args是原始值（如数字、对象），需要转换成ReactNode格式，比如用字符串包裹或JSX渲染：

// 处理数字类型
export const WithNumberChild: Story = {
  args: {
    children: String(123),
  },
};

// 处理对象类型
export const WithObjectChild: Story = {
  args: {
    children: <span>{JSON.stringify({ id: 1 })}</span>,
  },
};

4. 自定义组件继承MUI类型 #

如果是自定义MUI按钮变体，确保组件props的children继承自MUI的ButtonProps：

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

interface CustomButtonProps extends ButtonProps {
  // 自定义属性
}

const CustomButton = ({ children, ...props }: CustomButtonProps) => {
  return <Button {...props}>{children}</Button>;
};

内容的提问来源于stack exchange，提问作者Ian Leggett