什么是 @storybook/addon-centered？
@storybook/addon-centered 是一个应用在 Storybook 中的 addon，它可以让你很方便的展示你的组件，并使其居中显示。
开始使用 @storybook/addon-centered
我们首先需要确保一个准备好的 React 项目，然后依次执行以下命令：
- 首先，我们需要安装 Storybook：
npm install -g @storybook/cli
- 然后，我们需要将 Storybook 添加到我们的项目中：
getstorybook
- 如果你还没使用
npm初始化你的项目，则需要安装npm：
npm init
- 在你的项目中安装 @storybook/addon-centered：
npm install –-save-dev @storybook/addon-centered
- 在
.storybook/config.js文件中添加如下内容：
import { configure, addDecorator } from '@storybook/react';
import centered from '@storybook/addon-centered/react';
// 添加 centered
addDecorator(centered);
// 在这里添加你的故事
configure(() => require('./stories'), module);- 在您的组件故事中添加中心化参数：
storiesOf('<Your Component>', module)
.addDecorator(centered)
.add('default', () => (
// jsx content
));示例代码
让我们来一个例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ -------- ---- ----------------------------------
------ ------ ---- -----------
------------------- -------
-----------------------
---------- ------ -- -- ------------- ----------------
---------- ---- ------- -- -- -
--------
----- ---------- -------------- ------
-- -- --
-------
---------
---总结
@storybook/addon-centered 可以让您快速将组件居中，这对于开发测试非常有用。它易于安装和使用，并且可以与许多其他 Storybook addons 配合使用。希望这个教程可以帮助你更好地使用 Storybook 和 @storybook/addon-centered。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/storybook-addon-centered