在 Storybook

安装依赖

¥Install dependencies

安装 Chakra UI 和 Storybook 所需的依赖。

¥Install the required dependencies for Chakra UI and Storybook.

npm i @storybook/addon-themes @chakra-ui/react @emotion/react

设置预览

¥Setup Preview

编辑 .storybook/preview.tsx 文件以包含 Chakra UI 提供程序。

¥Edit the .storybook/preview.tsx file to include the Chakra UI provider.

import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import type { Preview } from "@storybook/react"

const preview: Preview = {
  // ...
  decorators: [
    (Story) => (
      <ChakraProvider value={defaultSystem}>
        <Story />
      </ChakraProvider>
    ),
  ],
}

export default preview

设置暗黑模式切换

¥Setup dark mode toggle

使用 @storybook/addon-themes 中的 withThemeByClassName 装饰器向 Storybook 工具栏添加颜色模式切换按钮。

¥Use the withThemeByClassName decorator from @storybook/addon-themes to add a color mode toggle to the Storybook toolbar.

import { withThemeByClassName } from "@storybook/addon-themes"
import type { Preview, ReactRenderer } from "@storybook/react"

const preview: Preview = {
  decorators: [
    // ...
    withThemeByClassName({
      defaultTheme: "light",
      themes: { light: "", dark: "dark" },
    }),
  ],
}

export default preview

启动 Storybook 服务器

¥Start the Storybook server

npm run storybook

尽情享受吧！

¥Enjoy!

在你的故事中使用 Chakra UI 组件。

¥Use Chakra UI components in your stories.

import { Button } from "@chakra-ui/react"

export const SampleStory = {
  render() {
    return <Button>Click me</Button>
  },
}