设置 Storybook

现在您已经了解了什么是故事以及如何浏览故事，让我们演示一下如何处理您的组件之一。

从您的项目中选择一个简单的组件，例如按钮，并编写一个 .stories.js 或一个 .stories.ts 文件来与它搭配使用。它可能看起来像这样

YourComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { YourComponent } from './YourComponent';
 
//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof YourComponent> = {
  component: YourComponent,
};
 
export default meta;
type Story = StoryObj<typeof YourComponent>;
 
export const FirstStory: Story = {
  args: {
    //👇 The args you need here will depend on your component
  },
};

转到您的 Storybook 以查看渲染的组件。如果它现在看起来有点奇怪，没关系。

根据您的技术栈，您可能还需要进一步配置 Storybook 环境。

渲染组件样式

Storybook 对您如何生成或加载 CSS 没有偏好。它渲染您提供的任何 DOM 元素。但有时，事情不会“看起来正确”。

您可能需要为 Storybook 的渲染环境配置您的 CSS 工具。以下是社区中流行工具的一些设置指南。

没有找到您要查找的工具？查看样式和 CSS 页面了解更多信息。

为您的技术栈配置 Storybook

Storybook 带有一个宽松的默认配置。它会尝试自定义自身以适应您的设置。但它并非万无一失。

在组件可以单独渲染之前，您的项目可能需要额外的要求。这需要进一步自定义配置。您可能需要三种主要的配置类别。

Webpack 和 Babel 等构建配置

如果您在运行 yarn storybook 命令时在 CLI 上看到错误，您可能需要更改 Storybook 的构建配置。以下是您可以尝试的一些方法

预设将各种技术的常见配置捆绑到 Storybook 中。特别是，预设存在于 Create React App 和 Ant Design 中。
为 Storybook 指定一个自定义的 Babel 配置。如果可以，Storybook 会自动尝试使用您的项目的配置。
调整 Storybook 使用的 Webpack 配置。如果需要，尝试修补您自己的配置。

运行时配置

如果 Storybook 构建成功，但您在浏览器中连接到它时立即看到错误，在这种情况下，很有可能是您的输入文件之一无法正确编译/转译以供浏览器解释。Storybook 支持常青浏览器，但您可能需要检查 Babel 和 Webpack 设置（见上文）以确保您的组件代码正常工作。

组件上下文

如果特定故事在渲染时出现问题，通常意味着您的组件期望组件可以使用特定的环境。

一个常见的前端模式是组件假设它们在特定“上下文”中渲染，在渲染层次结构中具有父组件（例如，主题提供者）。

使用装饰器来“包装”每个故事中必要的上下文提供者。 .storybook/preview.js 文件允许您自定义组件在画布（预览 iframe）中的渲染方式。查看以下示例，了解如何使用 Styled Components ThemeProvider、Vue's Fontawesome 或 Angular 主题提供者组件来包装 Storybook 中渲染的每个组件。

.storybook/preview.tsx

import React from 'react';
 
import { Preview } from '@storybook/react';
 
import { ThemeProvider } from 'styled-components';
 
const preview: Preview = {
  decorators: [
    (Story) => (
      <ThemeProvider theme="default">
        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
        <Story />
      </ThemeProvider>
    ),
  ],
};
 
export default preview;

加载资产和资源

我们建议使用 Storybook 静态地提供您的组件中请求的外部资源和资产。这确保资产始终可用于您的故事。阅读我们的文档了解如何使用 Storybook 托管静态文件。