【问题标题】：Chakra UI is not loading when used with Storybook与 Storybook 一起使用时，Chakra UI 未加载
【发布时间】：2022-01-05 14:57:31
【问题描述】：

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

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

这是 Storybook 上的按钮：

自定义主题的变体有效，但颜色无效：

我不确定如何解决这个问题。请帮帮我。

【问题讨论】：

【解决方案1】：

这可以通过 2 种方法中的一种来解决。对我来说，旧的非官方插件开箱即用。

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

.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',
  },
};

【讨论】：