前言
在前端开发过程中，UI 设计是非常重要的一环。在大型项目中，我们经常会遇到需要根据设计稿切换不同的主题风格的需求。这时候，我们可以使用 npm 包 storybook-addon-themes 来帮助我们快速切换主题，提高开发效率。
本篇文章将详细讲解 storybook-addon-themes 的使用方法，并提供示例代码以供参考。
安装
使用 npm 或 yarn 安装 storybook-addon-themes：
npm install --save-dev storybook-addon-themes
yarn add --dev storybook-addon-themes
配置
在 .storybook/main.js 中添加 themes addon：
module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ // ... 'storybook-addon-themes', // ... ], };
在 .storybook/preview.js 中添加默认的主题列表：
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------- --------------- ------- - ----- - - ----- -------- ---------------- ---------- ---------- ---------- -- - ----- ------- ---------------- ---------- ---------- ---------- -- -- -- ---展开代码
list 属性表示主题列表，每个主题包含 name、backgroundColor 和 textColor 三个属性，分别为主题名称、主背景色和文本颜色。
使用
在组件的 Storybook 文件中，添加 withThemes 装饰器，并在 parameters 对象中配置当前主题：
-- -------------------- ---- ------- ------ ----------- ---- ---------------- ------ ------- - ------ -------------- ---------- ------------ ----------- ------------- ----------- - ------- - --------- -------- ---------- ------ -- -- -- ------ ----- ------- - -- -- ------------ ---展开代码
selected 属性表示当前主题的名称，clearable 属性表示是否可以清除主题。
此外，还可以在组件内部使用 useTheme Hook 获取当前选中的主题：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ------------------------- ----- ----------- - -- -- - ----- ----- - ----------- ------ - ---- -------- ---------------- ---------------------- ------ ---------------- ---------- -------- -------- ------- -- - ---------------- ---------- -------- ----- ----- --- ----- ----------- ---------- --------- ------ -- -- ------ ------- ------------展开代码
示例代码
完整的示例代码见下：
-- -------------------- ---- ------- -- ------------------ -------------- - - -------- --------------------------- ---------------------------------------- ------- - -- --- ------------------------- -- --- -- --展开代码
-- -------------------- ---- ------- -- --------------------- ------ - ------------- - ---- ------------------- --------------- ------- - ----- - - ----- -------- ---------------- ---------- ---------- ---------- -- - ----- ------- ---------------- ---------- ---------- ---------- -- -- -- ---展开代码
-- -------------------- ---- ------- -- ---------------------- ------ ----- ---- -------- ------ - ---------- - ---- ------------------------- ------ ----------- ---- ---------------- ------ ------- - ------ -------------- ---------- ------------ ----------- ------------- ----------- - ------- - --------- -------- ---------- ------ -- -- -- ------ ----- ------- - -- -- ------------ ---展开代码
-- -------------------- ---- ------- -- -------------- ------ ----- ---- -------- ------ - -------- - ---- ------------------------- ----- ----------- - -- -- - ----- ----- - ----------- ------ - ---- -------- ---------------- ---------------------- ------ ---------------- ---------- -------- -------- ------- -- - ---------------- ---------- -------- ----- ----- --- ----- ----------- ---------- --------- ------ -- -- ------ ------- ------------展开代码
总结
使用 storybook-addon-themes 可以帮助我们快速切换主题，并提高开发效率。本篇文章简要介绍了 storybook-addon-themes 的安装和配置方法，详细讲解了如何在组件 Storybook 文件中使用 withThemes 装饰器和 useTheme Hook 来切换主题，并提供了示例代码供大家参考。希望本篇文章能对前端开发者有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/storybook-addon-themes
