React+TS+Storybook+MUI多组件故事报错：Stack被误作类型使用

错误原因 #

你遇到的'Stack' refers to a value, but is being used as a type here. Did you mean 'typeof Stack'?错误，核心是组件导入方式不规范，结合TypeScript类型推断逻辑导致的兼容性问题，以下是具体修正步骤：

解决方案 #

1. 修正Stack组件的导入方式 #

MUI的Stack组件为命名导出，将默认导入改为命名导入：

// button.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
// 修正导入方式
import { Stack } from '@mui/material/Stack';
import { Button } from './Button';

2. 检查TypeScript配置 #

确保tsconfig.json中以下关键配置正确，避免类型推断异常：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react-jsx",
    "strict": true
  }
}

3. 修正按钮变体值笔误 #

代码中variant='container'是错误写法，MUI Button的正确变体值为contained：

export const Variants: Story = {
    render: (args) => <Stack spacing={2}>
         <Button {...args} variant='contained'> Contained Button </Button>
         <Button {...args} variant='outlined'> Outlined Button </Button>
         <Button {...args}> Text Button </Button>
    </Stack>
}

4. 规范Story类型定义（可选） #

将Story类型定义改为更清晰的写法，消除类型推断歧义：

// 替换原有的type Story定义
type Story = StoryObj<Meta<typeof Button>>;

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