在现代的前端开发中，UI 库/框架不可或缺。Fluent UI 是一个微软公司开发的 React UI 系统，它采用了 Fluent Design System，提供了许多易于使用且具有高度一致性的组件。
@fluent-ui/styles 是 Fluent UI 提供的一个样式包，它通过 TypeScript 转换工具生成 css 样式，可以轻松应用于你的 React 组件应用中。本篇文章将介绍如何使用 @fluent-ui/styles 并展示它的一些用法。
安装
使用 npm 方法来安装 @fluent-ui/styles：
--- ------- -----------------
使用
在你的 React 项目中引入 @fluent-ui/styles 并开始对样式进行管理。
------ - ------------ - ---- --------------------
----- ------ - --------------
----- -
---------- ---------
-------- -------
---------------- -------
--
------ -
--------- -------
----------- -------
--
------- -
-------- ----- ------
------ --------
---------------- -------
------------- ------
---------- -
---------------- -----------
--
--
---
-------- ----- -
------ -
---- ------------------------
--- ------------------------------ -----------
------- ------------------------------- -----------
------
--
-以上代码展示了如何使用 @fluent-ui/styles，createStyles 是一个函数，它接受一个对象作为参数。这个对象中的每一个键都代表一个样式类名，每个值都是一个 CSS 样式对象。这个函数将返回一个样式表，你可以将其应用到你的组件中。
样式对象
样式对象就是一个键值对，键是 CSS 属性名称，值是对应属性的值。例如：
----- ------ - --------------
----- -
---------------- -------
-------- -------
--------- -------
------ -------
--
------ -
----------- -------
--------- -------
---------- -------
--
---样式类名
当你创建好你的样式对象后，你需要使用样式表中的类名来应用它们。在 @fluent-ui/styles 中，每个类名都会通过样式表创建一个唯一的 CSS 类名。
------ - ------------ - ---- --------------------
----- ------ - --------------
----- -
---------------- -------
-------- -------
--------- -------
------ -------
--
---
-------- ----- -
------ ---- ----------------------------- -------------
-在这个例子中，styles.root 将会被转换成一个唯一的 CSS 类名。这个类名会自动添加到 div 元素的 class 属性上。
嵌套样式
在复杂的 UI 应用中，你可能需要使用嵌套样式。@fluent-ui/styles 支持在样式表中添加子元素的样式。
------ - ------------ - ---- --------------------
----- ------ - --------------
----- -
---------------- -------
-------- -------
--------- -------
------ -------
-- ---- -
------ -------
--
-- -------- -
-------- ----- ------
------ --------
---------------- -------
------------- ------
---------- -
---------------- -----------
--
--
--
---
-------- ----- -
------ -
---- ------------------------
--------- -----------
------------- -----------
------
--
-嵌套样式与样式对象结合起来使用可以创建出可重用的样式混入。
----- ------------ - -
-------- ----- ------
------ --------
---------------- -------
------------- --
---------- -
---------------- -----------
--
--
----- ------ - --------------
----- -
---
-- -------- -------------
--
------------ -------------
---进阶技巧
样式对象的类型
使用 TypeScript 时，你可能需要指定样式对象的类型。你可以通过定义 Styles 泛型类别来实现。
------ - ------------- ------ - ---- --------------------
---- ----- - -
------ -------
--
---- --------- - ------ - ------- - ---------
----- ------ - ------------------- ------------------ - ----- -- -- --
----- -
---------------- -------
-------- -------
--------- -------
------ -------
--
------ -
----------- -------
--------- -------
---------- -------
------
--
------- -
-------- ----- ------
------ --------
---------------- -------
------------- ------
---------- -
---------------- -----------
--
--
----在这个例子中，我们通过指定 Props 泛型和 ClassKeys 泛型来声明了样式对象的类型。我们还可以使用模板字符串语法，在样式对象中使用 props 变量。
覆盖全局样式
在某些情况下，你可能需要针对某个组件定义自定义样式。@fluent-ui/styles 允许你轻松地为全局样式添加覆盖样式。你只需要将你的样式对象添加到一个名为 globalOverrides 的属性上即可。
------ - ------------ - ---- --------------------
----- ------ - --------------
---
---
---------------------- - -
------- -
---------------- ------
--
--在这个例子中，我们为所有 button 类型的元素添加了一个自定义背景颜色。如果你需要定义更具体的样式，你可以使用类名选择器。
---------------------- - -
------------ -
---------------- ------
--
--在这个例子中，我们只将自定义样式应用到了包含类名 myButton 的元素中。
运用主题
@fluent-ui/styles 实现了定义主题的功能，这允许你针对某些元素使用特定样式。
------ - ------------ - ---- --------------------
----- ------ - -------------------- -- --
----- -
---------------- -------------------------
---
--
------ -
------ ----------------------
---
--
----在这个例子中，我们使用了 createStyles 方法在主题字典中查找了名为 palette 的属性，并针对不同的元素应用了不同的主题颜色。
结论
@fluent-ui/styles 提供了简洁高效的方法来管理 React 元素的样式。上述教程涵盖了基础到高级的功能和用例。作为开发者，你可以使用这些技能更好地创建可维护和可扩展的 UI 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/fluent-software-ui-styles