reactjs - Storybook addDecorator 不适用于 config.js？

Question

为了实验，我将以下装饰器放入我的 Button.stories.tsx

const stories = storiesOf('Button', module)
stories.addDecorator(story => <div style={{backgroundColor: 'red', width: '500px', height: '100px'}}>{story()}</div>)
stories.add('with text', () => <Button>Hello Button</Button>)

它按预期在红色矩形顶部显示按钮。但是当我像这样在 .storybook/config.js 中放置相同的装饰器时

import { addDecorator } from '@storybook/react'
addDecorator(story => <div style={{backgroundColor: 'red', width: '500px', height: '100px'}}>{story()}</div>)

它没有任何效果！问题可能是由@storybook/react 版本引起的吗？当我尝试使用 typescript 制作故事书时，我不得不将此包从 3.4.8 版本升级到 4.0.0-alpha.10。以下是我的 package.json 中的一些版本：

"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0",
"@storybook/react": "4.0.0-alpha.10",

标签： reactjstypescriptstorybook

Answer 1

我认为您应该使用以下makeDecorator功能@storybook/addons：

见：
https ://storybook.js.org/addons/writing-addons/#the-addon

还要记住在以下位置注册插件.storybook/addons.js：
https ://storybook.js.org/addons/writing-addons/#register-the-addon