Сборник рассказов 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/ реакции версии? Когда я пытался заставить сборник рассказов работать с машинописью, мне пришлось обновить этот пакет с версии 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",

Answer 1

Я думаю, что вы должны использовать makeDecorator функция от @storybook/addons:

Увидеть:
https://storybook.js.org/addons/writing-addons/

Не забудьте также зарегистрировать аддон в .storybook/addons.js как в:
https://storybook.js.org/addons/writing-addons/