我還在學習故事書。我已經按照
這是 Storybook 上的按鈕：
自定義主題的變體有效，但顏色無效：
我不知道如何糾正這個問題。請幫幫我。
uj5u.com熱心網友回復：
這可以通過 2 種方式中的 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',
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/405853.html
標籤：
上一篇：為什么單擊按鈕時按鈕會上下移動？