文章/答案/技术大牛

发布

社区首页 >问答首页 >故事书找不到基于chakra-ui的组件。

问故事书找不到基于chakra-ui的组件。
EN

Stack Overflow用户

提问于 2020-09-12 22:51:34

回答 1查看 3.4K关注 0票数 1

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

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

这是我的故事书配置。不幸的是，我收到了一个错误，似乎故事书找不到我的组件。

有人能帮我弄清楚怎么回事吗？为什么故事书找不到我的组件？

这就是我试图添加的故事。

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

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

MenuComp.storyName = 'test';

reactjs

configuration

storybook

chakra-ui

回答 1

Stack Overflow用户

发布于 2020-09-14 20:44:28

我从一个简单的组件开始，严格遵循教程

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

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

import React, { FC } from 'react';
import { Button } from '@chakra-ui/core';

interface ButtonProps {
    size: string | any;
    variantColor: string;
}

const CustomButton: FC<ButtonProps> = ({ size, variantColor }) => (
  <Button variantColor={variantColor} size={size}>
    Button
  </Button>
);

export default CustomButton;

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',
};

3.在这一点上，配置您的文件preview.js非常重要，您将找到文件夹".storybook"，感谢这个提交chakraUiCommit，我找到了如何在每个故事书组件中包含主题提供程序

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

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

嗯，现在我解决了我的问题，这是我的最终结果。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63865610

复制

相似问题

问故事书找不到基于chakra-ui的组件。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问故事书找不到基于chakra-ui的组件。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问故事书找不到基于chakra-ui的组件。
EN