简介
storybook-addon-styled-component-theme 是一个适用于 Storybook 的插件，该插件可以帮助开发人员在查找和更新 Styled Components 主题时提供更佳的开发体验。
安装
使用 npm 安装：
npm install --save-dev storybook-addon-styled-component-theme
配置
添加插件
在 ./storybook/addons.js 中添加如下代码：
import 'storybook-addon-styled-component-theme/register';
添加参数
在您的 .storybook/config.js 文件中使用 addParameters 方法添加所需参数：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - ------ - ---- ---------------------
------ - ------------------ - ---- -----------------------------------------
----- ------------ - -
------- ---------
------- ---------
--
---------------
-------- -
------ ------------
--
---
-----------------------------------------------themesConfig：一个key是主题名称，value是styled-components的 CSS 模板的对象。themes.dark：一个key是主题名称，默认为light或dark。withThemesProvider：这个方法将自动配置主题供应程序并渲染默认的主题下拉菜单。
使用
通过使用 addWithTheme 方法来与主题状态集成：
import { withThemesProvider, addWithTheme } from 'storybook-addon-styled-component-theme';
addWithTheme({
Theme1: 'theme1',
Theme2: 'theme2',
})('Button', () => (
<Button>Click me!</Button>
));示例
config.js 示例
-- -------------------- ---- -------
------ - -------------- --------- - ---- -------------------
------ - ------ - ---- ---------------------
------ - ------------------ - ---- -----------------------------------------
----- ------------ - -
------- -
---------------- ----------
------ -------
--
------- -
---------------- ----------
------ -------
--
--
---------------
-------- -
------ ------------
--
---
-----------
--------------------------------- ----- ------------------------
-- --------
-----------------------------------------------stories.js 示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ - ---- -----------------------------------------
------ ------ ---- -----------------------
--------------
------- -
---------------- ----------
------ -------
--
------- -
---------------- ----------
------ -------
--
------------ -- -- -
------------- ------------
---总结
storybook-addon-styled-component-theme 插件提供了一个简便的方法来查找和更新 Styled Components 主题，相信您已经掌握了该插件的使用方法。如果您有任何疑问或困难，请在下面留言，我们将为您提供最佳的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb735b5cbfe1ea061177b