MDX

MDX 文件混合 Markdown 和 Javascript/JSX 以创建丰富的交互式文档。你可以将 Markdown 的可读语法（例如 # heading）用于文档，包括在 组件故事格式 (CSF) 中定义的故事，并在文件的任何位置自由嵌入 JSX 组件块。一次性全部完成。

¥MDX files mix Markdown and Javascript/JSX to create rich interactive documentation. You can use Markdown’s readable syntax (such as # heading) for your documentation, include stories defined in Component Story Format (CSF), and freely embed JSX component blocks at any point in the file. All at once.

此外，你可以在 MDX 中编写纯文档页面，并将它们与你的故事一起添加到 Storybook 中。

¥In addition, you can write pure documentation pages in MDX and add them to Storybook alongside your stories.

基本示例

¥Basic example

让我们从一个例子 Checkbox.mdx 开始，将 Markdown 与单个故事结合起来。

¥Let's start with an example, Checkbox.mdx, combining Markdown with a single story.

{/* Checkbox.mdx */}
 
import { Canvas, Meta } from '@storybook/blocks';
 
import * as CheckboxStories from './Checkbox.stories';
 
<Meta of={CheckboxStories} />
 
# Checkbox
 
A checkbox is a square box that can be activated or deactivated when ticked. 
 
Use checkboxes to select one or more options from a list of choices.
 
<Canvas of={CheckboxStories.Unchecked} />

此 MDX 文件引用了用 组件故事格式 (CSF) 编写的故事文件 Checkbox.stories.js|ts：

¥This MDX file references a story file, Checkbox.stories.js|ts, that is written in Component Story Format (CSF):

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Checkbox } from './Checkbox';
 
const meta: Meta<typeof Checkbox> = {
  component: Checkbox,
};
 
export default meta;
type Story = StoryObj<typeof Checkbox>;
 
export const Unchecked: Story = {
  args: {
    label: 'Unchecked',
  },
};

以下是它在 Storybook 中的渲染方式：

¥And here's how that's rendered in Storybook:

这里有很多事情要做。我们正在编写 JSX，并且还定义和引用与整个 Storybook 生态系统兼容的 Storybook 故事。

¥There’s a lot going on here. We're writing Markdown, we're writing JSX, and we're also defining and referencing Storybook stories that are drop-in compatible with the entire Storybook ecosystem.

让我们分解一下。

¥Let’s break it down.

MDX 和 CSF

¥MDX and CSF

你会注意到的第一件事是组件文档分为不同的格式：一个用于编写组件故事，描述每个可能的组件状态，第二个用于记录如何使用它们。这种拆分充分利用了每种格式的最佳品质：

¥The first thing you'll notice is that the component documentation is divided into distinct formats: one for writing component stories describing each possible component state and the second one for documenting how to use them. This split leverages the best qualities of each format:

• CSF 非常适合简洁地定义故事（组件示例）。如果你使用 TypeScript，它还提供类型安全和自动补齐。

  ¥CSF is great for succinctly defining stories (component examples). If you use TypeScript, it also provides type safety and auto-completion.

• MDX 非常适合编写结构化文档并使用交互式 JSX 元素编写它。

  ¥MDX is great for writing structured documentation and composing it with interactive JSX elements.

MDX 剖析

¥Anatomy of MDX

假设你已经熟悉使用 CSF 编写故事，我们可以更详细地剖析 MDX 方面的事情。

¥Assuming you’re already familiar with writing stories with CSF, we can dissect the MDX side of things in greater detail.

文档由多个由空行分隔的块组成。由于 MDX 将几种不同的语言混合在一起，它使用这些空行来帮助区分一个语言从哪里开始，下一个语言从哪里开始。如果不用空格分隔块，可能会导致（有时是神秘的）解析错误。

¥The document consists of a number of blocks separated by blank lines. Since MDX mixes a few different languages together, it uses those blank lines to help distinguish where one starts, and the next begins. Failing to separate blocks by whitespace can cause (sometimes cryptic) parse errors.

按顺序浏览代码块：

¥Going through the code blocks in sequence:

{ /* Checkbox.mdx */ }

MDX 中的注释是包含 JS 注释的 JSX 块。

¥Comments in MDX are JSX blocks that contain JS comments.

{/* Checkbox.mdx */}
 
import { Canvas, Meta } from '@storybook/blocks';
 
import * as CheckboxStories from './Checkbox.stories';

导入将在文件其余部分的 JSX 中使用的组件和故事。

¥Imports the components and stories that will be used in the JSX throughout the rest of the file.

{/* Checkbox.mdx */}
 
import { Meta } from '@storybook/blocks';
 
import * as CheckboxStories from './Checkbox.stories';
 
<Meta of={CheckboxStories} />

Meta 块定义文档在侧边栏中的位置。在这种情况下，它与 Checkbox 的故事相邻。默认情况下，文档侧边栏节点的标题为 "Docs"，但可以通过传递 name 属性（例如 <Meta of={CheckboxStories} name="Info" />）进行自定义。如果你想将文档节点放置在导航层次结构中的任意位置，可以使用 title prop（例如 <Meta title="path/to/node" />）。

¥The Meta block defines where the document will be placed in the sidebar. In this case, it is adjacent to the Checkbox’s stories. By default, the docs sidebar node is titled "Docs", but this can be customized by passing a name prop (e.g., <Meta of={CheckboxStories} name="Info" />). If you want to place a docs node at an arbitrary point in the navigation hierarchy, you can use the title prop (e.g., <Meta title="path/to/node" />).

# Checkbox
 
A checkbox is a square box that can be activated or deactivated when ticked.
 
Use checkboxes to select one or more options from a list of choices.

MDX 默认支持标准 markdown ("commonmark")，可以扩展以支持 GitHub Flavored Markdown (GFM) 和其他扩展（请参阅 故障排除部分 以了解有关当前某些限制的更多信息）。

¥MDX supports standard markdown ("commonmark") by default and can be extended to support GitHub Flavored Markdown (GFM) and other extensions (see the Troubleshooting section to learn more about some of the current limitations).

{/* Checkbox.mdx */}
 
import { Canvas } from '@storybook/blocks';
 
import * as CheckboxStories from './Checkbox.stories';
 
<Canvas of={CheckboxStories.Unchecked} />

最后，MDX 支持任意 JSX 块。

¥Finally, MDX supports blocks of arbitrary JSX.

在这种情况下，我们利用“Doc Blocks”，这是一个文档组件库，旨在与 Storybook 故事配合使用，以显示你的故事、组件 API 和用于与文档内的组件交互的控件以及其他实用程序。

¥In this case, we are leveraging “Doc Blocks”, a library of documentation components designed to work with Storybook stories to show your stories, your component APIs & controls for interacting with your components inside your documentation, among other utilities.

除了 Doc Blocks，MDX 还可以合并任意 React 组件，使其成为一个非常灵活的文档系统。假设你想要为你的组件提供一个“应该做和不应该做的事情”的程式化列表；你可以使用现成的组件或编写自己的组件。

¥In addition to Doc Blocks, MDX can incorporate arbitrary React components, making it a very flexible documentation system. Suppose you want a stylized list of “dos and don’ts” for your component; you can use off-the-shelf components or write your own.

{/* Guideline.mdx */}
 
<Guidelines>
  <Dos>
    - Use buttons for the main actions on your page 
    - Identify the primary action and make it `primary`
  </Dos>
  <Donts>
    - Use a button when a link will do (e.g., for navigation-only actions) 
    - Use multiple `primary` buttons in a single UI state
  </Donts>
</Guidelines>

已知限制

¥Known limitations

虽然 MDX 支持各种运行时（React、Preact、Vue），但 Storybook 的实现仅限于 React。这意味着你的文档在 React 中渲染，而你的故事在你选择的运行时渲染（React、Vue、Angular、Web Components、Svelte 等）。

¥While MDX supports a variety of runtimes (React, Preact, Vue), Storybook’s implementation is React-only. That means your documentation is rendered in React, while your stories render in the runtime of your choice (React, Vue, Angular, Web Components, Svelte, etc.).

设置自定义文档

¥Setup custom documentation

此外，要使用 MDX 记录你的组件，你还可以扩展它以编写其他类型的内容，例如有关如何使用它们的指南或最佳实践。要为具有此格式的故事启用自定义文档，请先更新 Storybook 配置文件（即 .storybook/main.js|ts|cjs）。

¥In addition, to document your components with MDX, you can also extend it to write other types of content, such as guidelines or best practices on how to use them. To enable custom documentation for your stories with this format, start by updating your Storybook configuration file (i.e., .storybook/main.js|ts|cjs).

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
  framework: '@storybook/your-framework',
  stories: [
    //👇 Your documentation written in MDX along with your stories goes here
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: ['@storybook/addon-essentials'],
};
 
export default config;

创建一个 MDX 文件以添加你的自定义文档。根据你希望文档在 UI 中渲染的方式，你需要考虑以下用例。

¥Create an MDX file to add your custom documentation. Depending on how you want your documentation to render in the UI, you'll need to consider the following use cases.

使用 Meta Doc Block

¥Using the Meta Doc Block

如果你需要将组件文档与现有故事匹配，则可以配置 Meta Doc Block 来控制文档的渲染方式。开箱即用，它允许你定义自定义标题或对你需要记录的故事的引用（即通过 of prop）。例如：

¥If you need to match the component documentation to an existing story, you can configure the Meta Doc Block to control how the documentation gets rendered. Out of the box, it allows you to define a custom title or a reference to the story you need to document (i.e., via the of prop). For example:

{/* Button.mdx */}
 
import { Meta, Controls } from '@storybook/blocks';
 
<Meta title="Button" />
 
# Definition
 
Button is a clickable interactive element that triggers a response.
 
You can place text and icons inside of a button.
 
Buttons are often used for form submissions and to toggle elements into view.
 
## Usage
 
The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button.
 
## Inputs
 
Button has the following properties:
 
<Controls />

编写未附加的文档

¥Writing unattached documentation

假设你正在记录现有组件，并且仅提供 Meta Doc Block，而没有其他属性或其他块。在这种情况下，Storybook 会将其视为 "unattached" 文档，或者换句话说，"documentation-only" 页面，并且它会在侧边栏导航菜单中以不同的方式渲染它：

¥Suppose you're documenting an existing component and only provide the Meta Doc Block without additional props or other blocks. In that case, Storybook will consider it as "unattached" documentation, or in other words, a "documentation-only" page, and it will render it differently in the sidebar navigation menu:

{/* ExampleDocumentation.mdx */}
 
import { Meta } from '@storybook/blocks';
 
import * as ExampleComponentStories from './ExampleComponent.stories';
 
{/* 👇 Documentation-only page */}
 
<Meta title="Documentation" />
 
{/* 👇 Component documentation page */}
 
<Meta of={ExampleComponentStories} /> 

使用文件系统

¥Using the File System

但是，对于某些用例，例如独立页面，甚至作为测试组件的指南，可能不需要提供 Meta Doc Block。在这种情况下，你可以安全地省略它。Storybook 将依赖于文件的物理位置将文档放置在侧边栏中，用你自己的文档覆盖任何预先存在的 auto-generated 文档。例如：

¥However, providing the Meta Doc Block may not be required for certain use cases, such as standalone pages or even as guidelines for testing your components. In that case, you can safely omit it. Storybook will instead rely on the file's physical location to place the documentation in the sidebar, overriding any pre-existent auto-generated documentation with your own. For example:

{/* src/components/Select.mdx */}
 
# Select
 
Select is a type of input that allows users to choose one or more options from a list of choices. 
 
The options are hidden by default and revealed when a user interacts with an element. 
 
It shows the currently selected option in its default collapsed state.
 
## Design implementation
 
To help users get acquainted with the existing UI elements, it is recommended to use check the Figma file to see how the select input is implemented.
 
### When to use?
 
In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead. 
 
### How to use?
 
To help users understand the options available in a select input, include a default option that is unselectable and acts as a label.
 

加载自定义 MDX 文档后，Storybook 将使用相同的启发式规则推断标题和位置以生成 自动标题故事 并将其作为 Docs 条目渲染在侧边栏中。

¥Once the custom MDX documentation is loaded, Storybook will infer the title and location using the same heuristic rules to generate auto-title stories and render it in the sidebar as a Docs entry.

使用独立文档页面

¥Working with standalone documentation pages

编写独立文档页面是一种常见用例，不仅适用于每个组件，也适用于每个项目。例如，你可能希望记录项目的入职流程并附带使用说明。为此，你可以使用类似的结构和内容创建一个包含文档的新 MDX 文件：

¥Writing standalone documentation pages is a common use case that applies not only on a per-component but also on a per-project basis. For example, you might want to document your project's onboarding process with instructions on using it. To do so, you can create a new MDX file containing your documentation using a similar structure and content:

{/* src/GettingStarted.mdx */}
 
# Getting Started
 
Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
 
## Table of Contents
 
- [Design Resources](#design-resources)
  - [Figma](#figma)
  - [UI/UX Design Guidelines](#uiux-design-guidelines)
  - [Design Assets](#design-assets)
 
- [Development Resources](#development-resources)
  - [Coding Standards](#coding-standards)
  - [Version Control](#version-control)
  - [Development Tools](#development-tools)
 
---
 
## Design Resources
 
### Figma
 
[Figma](https://www.figma.com/) is a collaborative design and prototyping tool. It's the heart of the design process, allowing designers to work together seamlessly.
 
- **Get Access**: If you're not already part of the Figma project, request access from the project lead or manager.
 
### UI/UX Design Guidelines
 
Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
 
- [UI/UX Guidelines Document](https://your-design-guidelines-link.com)
 
### Design Assets
 
All the essential design assets like logos, icons, and brand guidelines can be found in the Figma project. Ensure you have access and familiarize yourself with these assets for consistency.
 
---
 
## Development Resources
 
### Coding Standards
 
Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
 
- [Coding Standards Document](https://your-coding-standards-link.com)
 
### Version Control
 
We use Git for version control. Make sure you have Git installed and are familiar with its basics.
 
### Development Tools
 
Your development environment is critical. Here are some tools and resources to help you set up your workspace:
 
- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
 
- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
 
---

当 Storybook 加载文档时，它将使用文件的物理位置推断页面在侧边栏导航菜单中的位置，并将其渲染为 Docs 条目。

¥When Storybook loads the documentation, it will infer the placement of the page in the sidebar navigation menu using the file's physical location and render it as a Docs entry.

完全控制自定义文档

¥Fully control custom documentation

当应用于每个项目组件时，文档的维护和更新成本可能很高。为了帮助简化此过程，Storybook 提供了一组有用的 UI 组件（即 Doc Blocks）来帮助涵盖更高级的情况。如果你需要其他内容，请使用它们来帮助创建自定义文档。

¥Documentation can be expensive to maintain and keep up to date when applied to every project component. To help simplify this process, Storybook provides a set of useful UI components (i.e., Doc Blocks) to help cover more advanced cases. If you need additional content, use them to help create your custom documentation.

{/* Button.mdx */}
 
import { Meta, Story } from '@storybook/blocks';
 
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
# Button
 
Button is a clickable interactive element that triggers a response.
 
You can place text and icons inside of a button.
 
Buttons are often used for form submissions and to toggle elements into view.
 
## Usage
 
<Story of={ButtonStories.Basic} />

使用多个组件

¥Working with multiple components

如果你需要在单个文档页面中记录多个组件，则可以在 MDX 文件中直接引用它们。在内部，Storybook 会查找故事元数据并将其与你现有的文档一起编写。例如：

¥If you need to document multiple components in a single documentation page, you can reference them directly inside your MDX file. Internally, Storybook looks for the story metadata and composes it alongside your existing documentation. For example:

{/* Page.mdx */}
 
import { Canvas, Meta, Story } from '@storybook/blocks';
 
import * as ListStories from './List.stories';
 
import * as ListItemStories from './ListItem.stories';
 
import * as PageStories from './Page.stories';
 
<Meta of={PageStories} />
 
# Page
 
Page is a layout container that is used to position children in predetermined areas. 
 
It's often used to apply consistent positioning for content across pages in an application
 
## Usage
 
<Canvas of={PageStories.Basic} />
 
# List
 
List is a grouping of related items. List can be ordered with multiple levels of nesting.
 
## Usage
 
<Story of={ListStories.Filled} />
 
# List Item
 
List items are used to group related content in a list. They must be nested within a List component.
 
## Usage
 
<Story of={ListItemStories.Starter} meta={ListItemStories} />

从 Markdown 生成文档

¥Generate documentation from Markdown

如果你需要使用 Markdown 编写的其他内容扩展文档，则可以使用 Markdown Doc Block 导入可用内容，Storybook 会将其与你现有的文档一起渲染。例如，如果你有一个 CHANGELOG.md 文件，你可以导入它并在你的文档页面中渲染它，如下所示：

¥If you need to extend your documentation with additional content written in Markdown, you can use the Markdown Doc Block to import the available content, and Storybook will render it alongside your existing documentation. For example, if you have a CHANGELOG.md file, you can import it and render it in your documentation page as follows:

{/* Changelog.mdx */}
 
import { Meta, Markdown } from "@storybook/blocks";
 
import Readme from "../../Changelog.md?raw";
 
<Meta title="Changelog" />
 
# Changelog
 
<Markdown>{Readme}</Markdown>

链接到其他故事和页面

¥Linking to other stories and pages

改进文档的另一种方法是链接到其他故事和页面。假设你已经有一个具有以下唯一标识符 some--id 的组件故事，并且你希望将其链接到你的文档页面。在这种情况下，你可以使用 path 查询字符串重定向到与故事相关的文档条目：

¥Another way to improve documentation is by linking to other stories and pages. Suppose you already have a component story with the following unique identifier, some--id, and you want to link it to your documentation page. In that case, you can use the path query string to redirect to the documentation entry related to the story:

[Go to specific documentation page](?path=/docs/some--id)

相反，如果你需要定位特定的文档部分，你可以调整链接以指向它。例如：

¥Instead, if you need to target a specific documentation section, you can adjust the link to point at it. For example:

[Go to the conclusion of the documentation page](?path=/docs/some--id#conclusion)

但是，交叉链接文档并不局限于文档页面。如果你需要引用特定的故事，你可以调整 path 查询并提供故事的唯一标识符。例如：

¥However, cross-linking documentation isn't restricted to documentation pages. You can adjust the path query and supply the story's unique identifier if you need to reference a specific one. For example:

[Go to specific story canvas](?path=/story/some--id)

故障排除

¥Troubleshooting

Markdown 表格无法正确渲染

¥Markdown tables aren't rendering correctly

如果你扩展文档以包含特定功能（例如表格、脚注），则在使用 Storybook 支持的当前 MDX 版本正确渲染它们时可能会遇到一些问题。我们建议在你的配置文件（即 .storybook/main.js|ts）中启用 remark-gfm 插件以正确渲染它们。

¥If you're extending your documentation to include specific features (e.g., tables, footnotes), you may run into some issues rendering them correctly using the current MDX version supported by Storybook. We recommend enabling the remark-gfm plugin in your configuration file (i.e., .storybook/main.js|ts) to render them correctly.

import remarkGfm from 'remark-gfm';
 
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    // Other addons go here
    {
      name: '@storybook/addon-docs',
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [remarkGfm],
          },
        },
      },
    },
  ],
};
 
export default config;

MDX 文档未在我的环境中渲染

¥The MDX documentation doesn't render in my environment

由于 Storybook 依赖 MDX 3 来渲染文档，一些技术限制可能会阻止你迁移到此版本。如果是这种情况，我们已经准备了一组说明来帮助你过渡到这个新版本。

¥As Storybook relies on MDX 3 to render documentation, some technical limitations may prevent you from migrating to this version. If that's the case, we've prepared a set of instructions to help you transition to this new version.

Storybook 不会为我的组件故事创建文档

¥Storybook doesn't create documentation for my component stories

如果你遇到 Storybook 无法检测和渲染组件故事文档的情况，则可能是由于 Storybook 中的配置错误。检查你的配置文件（即 .storybook/main.js|ts）并确保 stories 配置元素提供了到你的故事位置的正确路径（例如 ../src/**/*.stories.@(js|jsx|mjs|ts|tsx)）。

¥If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., .storybook/main.js|ts) and ensure the stories configuration element provides the correct path to your stories location (e.g., ../src/**/*.stories.@(js|jsx|mjs|ts|tsx)).

迁移似乎不稳定，并且一直失败

¥The migration seems flaky and keeps failing

默认情况下，运行 migration 命令将提示你根据 Storybook 支持的 MDX 版本更新项目中现有的 MDX 文件。但是，这可能是一个破坏性的过程，特别是如果你从使用旧版 MDX 格式的 Storybook 的先前版本升级。为了帮助你解决这些问题，我们准备了一些可能对你有帮助的建议。

¥By default, running the migration command will prompt you to update the existing MDX files in your project according to the MDX version supported by Storybook. However, this might be a disruptive process, specifically if you're upgrading from a previous version of Storybook where you were using the legacy MDX format. To help you troubleshoot those issues, we've prepared some recommendations that might help you.

首先在项目目录中运行以下命令：

¥Start by running the following command inside your project directory:

npx @hipster/mdx2-issue-checker

完成后，它将输出导致问题的文件列表。然后，你可以使用此信息手动解决问题。

¥When it finishes, it will output the list of files causing issues. You can then use this information to fix the problems manually.

此外，如果你正在使用 VSCode，则可以添加 MDX 扩展 并通过将以下内容添加到用户设置中来启用 MDX 对 linting、类型检查和自动补齐的实验性支持：

¥Additionally, if you're working with VSCode, you can add the MDX extension and enable MDX experimental support for linting, type checking, and auto-completion by adding the following to your user settings:

{
  "mdx.experimentalLanguageServer": true
}

如果你仍然遇到问题，我们建议你使用默认沟通渠道（例如 GitHub 讨论）联系社区。

¥If you're still encountering issues, we recommend reaching out to the community using the default communication channels (e.g., GitHub discussions).

控件未更新 MDX 文档页面中的故事

¥The controls are not updating the story within the MDX documentation page

如果你通过 inline 配置选项关闭了故事的内联渲染，你将遇到相关控件未在文档页面中更新故事的情况。这是当前实现的已知限制，将在未来的版本中解决。

¥If you turned off inline rendering for your stories via the inline configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.

使用的 React 版本出乎意料

¥The React version used is unexpected

对于大多数项目，Storybook 的 addon-docs 使用项目依赖中列出的 React 版本。如果找不到，它将使用 React 18.2.0。对此有两个例外：

¥For most projects, Storybook's addon-docs uses the React version listed in your project's dependencies. If it does not find one, it will use React 18.2.0. There are two exceptions to this:

• Preact 项目将始终使用 React 17

  ¥Preact projects will always use React 17

• Next.js 项目将始终使用安装的 Next.js 版本附带的预览版本，无论项目的依赖中列出了哪个 React 版本。

  ¥Next.js projects will always use the canary version that comes with the Next.js version installed, regardless of which React version is listed in the project’s dependencies.

如果你在使用的 React 版本时遇到问题，则可能需要重新创建项目的 node_modules 文件夹以确保使用正确的版本。

¥If you're having issues with the React version used, you may need to re-create your project's node_modules folder to ensure the correct version is used.

了解有关 Storybook 文档的更多信息

¥Learn more about Storybook documentation

• 自动文档 用于为你的故事创建文档

  ¥Autodocs for creating documentation for your stories

• 用于自定义文档的 MDX

  ¥MDX for customizing your documentation

• 文档块 用于编写你的文档

  ¥Doc Blocks for authoring your documentation

• 发布文档 用于自动化发布文档的过程

  ¥Publishing docs to automate the process of publishing your documentation