前言
在前端开发中，UI 库是必不可少的一部分。UI 库是指集成了一系列 UI 基础组件的库，可以用于快速构建页面。在 React 生态中一个常用的 UI 库是 Office UI Fabric, 它提供了许多基础组件并且兼容了 Office 风格。@uifabric/variants 是 Fabric 中的一个 npm 包，它提供了一种灵活的组件样式设计方案。
什么是 @uifabric/variants？
@uifabric/variants 是 Office UI Fabric 的一部分，它提供了一种使组件样式更加灵活的方案，让你可以轻松为组件定义多种样式，例如大小、颜色和形状等。
如何使用 @uifabric/variants？
@uifabric/variants 有两种使用方式，一种是在组件上使用，另外一种是使用 createVariants 函数来生成一个新的包含了多个样式组成的对象。
使用方法一： 在组件上使用
在组件上使用 @uifabric/variants 非常简单，只需要按照以下步骤：
- 安装 @uifabric/variants。
npm install @uifabric/variants
- 引入样式和变量。
@uifabric/variants 需要引入样式和变量，并且样式和变量需要和组件一起使用。例如，我们想要定义一个 button 组件的背景颜色样式，可以写如下代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
------ - --------------- ------------- - ---- ---------------------
-- ---- ----- --
--------- ------------ -
---
-- ---- -----
--------- --------- - ----------- - -----------
---
-
-- ------
--------- ----------------- -
---
-- ---- ----- -----
----------------- -------
---
-
-- ----
------ ----- ------- ------------------------------------- - ------- -- -
-- ---- ------------
----- ------------ - ----------------
-------- -
-
---------------- --------------------
--
--
---------- -
-
---------------- ---------------------
--
--
--------- -
-
---------------- ----------------------
--
--
---
-- -- ----- - ------------ ----------
----- ---------- - ------------------------------------------ --------------
-- ------
------ ------- ------------------------------------------------------
--
-- ------
-------- --------------------------- ------------- -
-- ---- ------
----- ------- ----------------- - -
---------------- -----------------------------
--
-- --------
------ ------------------- --------------
-在上述代码中，我们首先引入了 @uifabric/variants 的 createVariants 函数和颜色变量 neutralColors，然后根据组件 props 的 variant 属性使用 createVariants 函数定义了三个不同的样式，最后在 getClassNames 函数中把定义的样式和 props.styles 合并起来得到实际使用的样式。
使用方式一需要在每个组件上重复定义样式，对于较多组件的项目不够友好。
使用方法二：使用 createVariants 函数
使用 createVariants 函数可以避免在每个组件上定义样式，只需要定义一次就可以在多个组件中重复使用样式。
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
------ - --------------- ------------- - ---- ---------------------
-- -- ------ --
----- -------------- - ----------------
-------- -
-
---------------- --------------------
--
--
---------- -
-
---------------- ---------------------
--
--
--------- -
-
---------------- ----------------------
--
--
---
-- -- ------ --
------ ----- ------- ------------------------------------- - ------- -- -
-- -- ----- - -------------- ----------
----- ---------- - -------------------------------------------- --------------
-- ------
------ ------- ------------------------------------------------------
--
-- ------
-------- --------------------------- ------------- -
-- ---- ------
----- ------- ----------------- - -
---------------- -----------------------------
--
-- --------
------ ------------------- --------------
-在上述代码中，我们把创建 button 样式的代码独立到了一个单独的文件中。这种方式可以在多个组件中共享样式。
总结
@uifabric/variants 提供了一种灵活的组件样式设计方案。使用 createVariants 函数可以避免在每个组件上定义样式，只需要定义一次就可以在多个组件中重复使用样式。希望这篇文章能够帮助你更好地理解如何使用 @uifabric/variants。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac61b5cbfe1ea06109fd