在前端开发中，样式的设计和管理是一个很重要的话题，其中一个比较有趣的工具是 Storybook。Storybook 是一个 UI 组件库的开发环境，可以让开发者快速创建、测试和文档化组件库中的 UI 组件，其包含了非常丰富的功能。
在本文中，我们将介绍一个 Storybook 的扩展 npm 包 storybook-addon-themr，它可以让开发者在 Storybook 环境中轻松地进行样式调试和管理，能够提高我们的 UI 开发效率。
安装
在使用之前，需要先安装 Storybook，如果还没有安装可以通过下面命令进行安装：
npm install -g @storybook/cli
安装完后，我们可以创建一个新的 Storybook 项目：
npx sb init
然后安装 storybook-addon-themr：
npm install --save-dev storybook-addon-themr
使用
安装完成后，我们需要在 Storybook 的配置文件中注册该扩展，步骤如下：
- 打开
.storybook/main.js文件 - 导入该扩展
const { withTheming } = require('storybook-addon-themr');- 使用 withTheming 方法包装 Storybook 的配置
module.exports = withTheming({
// Storybook 配置
});完整代码如下：
-- -------------------- ---- -------
----- - ----------- - - ---------------------------------
-------------- - -------------
----------- -
------ -
-- ------
-
-
-- -------
---以上代码中，我们通过 parameters 属性来设置样式，可以设置全局的样式或者局部组件的样式。
其中，全局样式是指应用到所有 Storybook 基础样式上的样式，如颜色、字体、边框等；而局部样式是指应用于指定组件的样式，如单独的组件样式、和 Story 的上下文环境相关的样式。
下面我们将详细介绍两种情况的使用。
设置全局样式
下面是一个修改背景颜色的例子，我们可以在 parameters 的 themr 属性中添加一个 base 对象，修改 background 属性值即可：
-- -------------------- ---- -------
-------------- - -------------
----------- -
------ -
----- -
----------- ---------
-
-
-
---添加完上述代码后，我们可以在 Storybook 中看到全局的背景色已经发生变化。
设置局部组件样式
story 应该一直是展示单一组件的，而组件又有很多的状态和用例，所以局部样式的支持非常重要。
假设我们需要给某个 story 的组件应用不同的样式，可以通过设置 themed 属性和 namespaces 属性实现：
-- -------------------- ---- -------
-------------- - -------------
----------- -
------ -
----------- -----------------
------------ -
---- -------
------ -
---------- ----------
-
-
-
-
---上面代码中，我们增加了一个名为 myNamespace 的样式命名空间，该样式命名空间会将 tag 和各种 props 应用到所有匹配的组件上。
下面是如何在 story 中应用该样式：
-- -------------------- ---- -------
------ ------- -
------ --------------
---------- ------------
----------- -
------ -
------- ----------------
-
-
--
------ ----- ------- - -- -- -
-------------------- --------- ------------------
--上面代码中，我们为 story 的 parameters 属性增加了 themr 属性，主动包含了 myNamespace 定义的样式，而具体应用到的组件是位于 story 中的 <MyComponent> 组件。
同样的，在多个 story 中共享样式也是很容易的，只需将 themr 属性添加到 Storybook 配置中即可，如：
-- -------------------- ---- -------
-------------- - -------------
----------- -
------ -
----------- -----------------
------------ -
---- -------
------ -
---------- ----------
-
-
-
--
-- --- ----- --
---由于 withTheming 方法会返回一个修饰过的配置对象，可以使用该对象并导出它。
结语
上面是我们使用 storybook-addon-themr 的简单教程，它为我们提供了非常方便的样式管理和调试工具。了解和使用它将有助于我们更高效地开发 UI 组件，并且可以非常方便的管理样式。
当然还有许多其他的 API 和配置，我们可以在 Storybook 和 npm 包文档中查看具体介绍和使用方法。
完整代码及可运行的示例可参考 github。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8781e8991b448d923c