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

Chakra UI is not loading when used with Storybook

我还在学习故事书。我已经按照 here. Here's the link for the repository.

中提到的装饰器文档使用 create-react-app 设置了 Storybook 和 Chakra-UI

出于某种原因，Storybook 未从 Chakra-UI 加载样式。 这是 React 应用程序上的按钮：


这是 Storybook 上的按钮：

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

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

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

选项 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,
  },
}

但是，这对我来说并不是开箱即用的。我最终会在 build 上遇到 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',
  },
};