Reactjs 故事书没有'；t根据脉轮ui查找组件

我在尝试故事书和脉轮ui。 下面是我如何组织我的文件夹

这是我的故事书配置。 不幸的是，我收到了一个错误，好像故事书没有找到我的组件

有人能帮我弄明白怎么了吗？ 为什么故事书找不到我的组件

-----------更新------------

这就是我试图补充的故事

import React from 'react';
import {
  Menu,
  MenuButton,
} from '@chakra-ui/core';

export function MenuComp() {
  return (
    <Menu>
      <MenuButton>Games</MenuButton>
    </Menu>
  );
}

MenuComp.storyName = 'test';

从“React”导入React；
进口{
菜单，
菜单按钮，
}来自“@chakra ui/core”；
导出函数MenuComp（）{
返回(
游戏
);
}
MenuComp.storyName='test'；

我从一个更简单的组件开始，严格按照

我将在这里写一个小指南，我希望它能简化读者的生活

1.我在路径“src/components/CustomButton”中编写了一个简单的组件

import React，{FC}来自'React'；
从“@chakra ui/core”导入{Button}；
界面按钮按钮{
大小：字符串|任意；
variantColor:字符串；
}
常量自定义按钮：FC=（{size，variantColor}）=>(
按钮
);
导出默认自定义按钮；

2.我在“src/stories/CustomButton.stories.tsx”中添加了相对的故事组件

import React from 'react';
import CustomButton from 'components/CustomButton/index';

export default {
  component: CustomButton,
  title: 'CustomButton',
};

const Template = (args:any) => <CustomButton {...args} />;

export const Default: any = Template.bind({});
Default.args = {
  size: 'md',
  variantColor: 'green',
};

从“React”导入React；
从“组件/自定义按钮/索引”导入自定义按钮；
导出默认值{
组件：自定义按钮，
标题：“自定义按钮”，
};
常量模板=（参数：任意）=>；
export const Default:any=Template.bind（{}）；
Default.args={
尺寸：'md'，
variantColor:'绿色'，
};

3.此时，配置文件preview.js以找到文件夹“.storybook”是非常重要的，由于这次提交，我了解了如何在每个storybook组件中包含主题提供程序

import React from 'react'
import {addDecorator} from '@storybook/react'
import {ThemeProvider, CSSReset} from '@chakra-ui/core'

addDecorator((storyFn) => (
  <ThemeProvider>
    <CSSReset />
    {storyFn()}
  </ThemeProvider>
))

从“React”导入React
从“@storybook/react”导入{addDecorator}
从“@chakra ui/core”导入{ThemeProvider，CSSReset}
addDecorator（（故事fn）=>(
{storyFn（）}
))

嗯，在这一点上，我解决了我的问题，这是我的最终结果

---

我从一个简单的组件开始，严格按照

我将在这里写一个小指南，我希望它能简化读者的生活

1.我在路径“src/components/CustomButton”中编写了一个简单的组件

import React，{FC}来自'React'；
从“@chakra ui/core”导入{Button}；
界面按钮按钮{
大小：字符串|任意；
variantColor:字符串；
}
常量自定义按钮：FC=（{size，variantColor}）=>(
按钮
);
导出默认自定义按钮；

2.我在“src/stories/CustomButton.stories.tsx”中添加了相对的故事组件

import React from 'react';
import CustomButton from 'components/CustomButton/index';

export default {
  component: CustomButton,
  title: 'CustomButton',
};

const Template = (args:any) => <CustomButton {...args} />;

export const Default: any = Template.bind({});
Default.args = {
  size: 'md',
  variantColor: 'green',
};

从“React”导入React；
从“组件/自定义按钮/索引”导入自定义按钮；
导出默认值{
组件：自定义按钮，
标题：“自定义按钮”，
};
常量模板=（参数：任意）=>；
export const Default:any=Template.bind（{}）；
Default.args={
尺寸：'md'，
variantColor:'绿色'，
};

3.此时，配置文件preview.js以找到文件夹“.storybook”是非常重要的，由于这次提交，我了解了如何在每个storybook组件中包含主题提供程序

import React from 'react'
import {addDecorator} from '@storybook/react'
import {ThemeProvider, CSSReset} from '@chakra-ui/core'

addDecorator((storyFn) => (
  <ThemeProvider>
    <CSSReset />
    {storyFn()}
  </ThemeProvider>
))

从“React”导入React
从“@storybook/react”导入{addDecorator}
从“@chakra ui/core”导入{ThemeProvider，CSSReset}
addDecorator（（故事fn）=>(
{storyFn（）}
))

嗯，在这一点上，我解决了我的问题，这是我的最终结果

---

您是否在

菜单.stories.tsx

中编写了任何故事？您是否在

菜单.stories.tsx

中编写了任何故事？