设置 Storybook

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

从您的项目中选择一个简单的组件，例如 Button，并为其编写一个 .stories.js、.stories.ts 或 .stories.svelte 文件。它可能看起来像这样

YourComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { YourComponent } from './YourComponent';
 
//👇 This default export determines where your story goes in the story list
const meta = {
  component: YourComponent,
} satisfies Meta<typeof YourComponent>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
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 的构建配置。以下是一些可以尝试的方法

预设 (Presets) 将常见的配置打包到 Storybook 中，适用于各种技术。特别是，存在适用于 Create React App 和 Ant Design 的预设。
为 Storybook 指定自定义的 Babel 配置。Storybook 会尝试使用您项目的配置（如果可能）。
调整 Storybook 使用的 Webpack 配置。如果需要，可以尝试注入您自己的配置。

运行时配置

如果 Storybook 构建成功，但在浏览器中连接时立即出现错误，那么很可能是您的一个输入文件未能正确编译/转译以被浏览器解释。Storybook 支持最新的浏览器，但您可能需要检查 Babel 和 Webpack 设置（见上文），以确保您的组件代码正常工作。

组件上下文

如果某个故事渲染有问题，通常意味着您的组件需要一个特定的环境才能提供给组件。

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

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

.storybook/preview.tsx

import React from 'react';
 
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Preview } from '@storybook/your-framework';
 
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 托管静态文件。