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版本引起的吗？当我试图使Storybook与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",

Answer 1

我认为您应该使用<!doctype html> <html> <head> <title>Süleyman Yaman</title> </head> <body> <h1 align="center">Süleyman Yaman</h1> <h3 align="center"> Welcome to my personal website! </h3> <p align="center"> This the personal website of me. You can find external links below <p/> <div class="vertical-menu"> <a class="active" href="#home">Home</a> <a href="aboutme.html">About Me</a> <a href=#programming>My Academic Work</a> <a href=#programming>Programming</a> <a href=#programming>Guitar Covers</a> <a href=#programming>Erasmus Blog</a> <a href=#programming>Contact</a> </div>中的makeDecorator函数：

请参阅：
https://storybook.js.org/addons/writing-addons/#the-addon

还请记住要在@storybook/addons中注册插件，如下所示：
https://storybook.js.org/addons/writing-addons/#register-the-addon

故事书addDecorator在config.js中不起作用吗？

1 个答案: