与 Storybook 一起使用时，Chakra UI 未加载

Question

我还在学习故事书。我已经按照此处提到的装饰器文档使用 create-react-app 设置了 Storybook 和 Chakra-UI 。这是存储库的链接。

由于某种原因，Storybook 没有从 Chakra-UI 加载样式。这是反应应用程序上的按钮：

这是 Storybook 上的按钮：

自定义主题的变体可以工作，但不能使用颜色：

我不知道如何纠正这个问题。请帮帮我。

Answer 1

这可以通过两种方式之一解决。对于我来说，旧的非官方插件开箱即用。

选项 1：非官方插件，但更简单

安装 https://storybook.js.org/addons/@snek-at/storybook-addon-chakra-ui

.storybook/main.js

module.exports = {
  addons: ['@snek-at/storybook-addon-chakra-ui']
}

由于您需要自定义主题：

import myTheme from '../theme'
export const parameters = {chakra: {theme: myTheme}}

选项 2： - 官方插件

就是使用非常新的官方 chakra-ui 插件。

@chakra-ui/storybook-addon

npm i -D @chakra-ui/storybook-addon
npm i @chakra-ui/icons

然后在.storybook/main.js中添加插件

module.exports = {
  addons: ['@chakra-ui/storybook-addon'],
}

.storybook/preview.js

const theme = require('../path/to/your/theme')

export const parameters = {
  chakra: {
    theme,
  },
}

然而，这对我来说并不是开箱即用的。我最终会在构建时遇到 webpack 错误。为了解决这个问题，我使用了实验性的 webpack 5 作为故事书。有关如何安装的分步说明： https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

但对我来说这已经足够了

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

和 .storybook/main.js

module.exports = {
  core: {
    builder: 'webpack5',
  },
};