介绍
@material-ui/styles 是一款基于 Material-UI 组件库的样式管理库，通过该库我们可以很方便地管理 Material-UI 组件的样式，定制化样式，以及实现高度可复用的样式系统，本篇文章将详细介绍 @material-ui/styles 的基本用法，带领大家打造自己的样式系统。
安装
我们可以通过 NPM 或者 Yarn 安装 @material-ui/styles 包，使用如下命令：
# NPM 安装 npm install @material-ui/styles # Yarn 安装 yarn add @material-ui/styles
使用
ThemeProvider
使用 @material-ui/styles 首先需要定义一个主题（Theme），主题是 Material-UI 组件的样式基础，类似于 CSS 中的样式表。ThemeProvider 组件提供了一种在 Material-UI 组件中定义主题的方式。
使用如下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------------------
------ - --------------- ------------- - ---- ---------------------------
----- ----- - ----------------
----------- -
----------- --------
--
-------- -
-------- -
----- ----------
--
---------- -
----- ----------
--
--
---
-------- ----- -
------ -
-------------- --------------
------- --------------------------------
------- ------------------------------------
----------------
--
-
------ ------- ----在上面的示例中，我们创建了一个名为 theme 的主题，该主题定义了两个颜色变量 primary 和 secondary，我们可以在 Button 组件中使用这两个变量。
makeStyles
在 Material-UI 中，我们可以使用 makeStyles 函数来创建自定义样式钩子（Custom Style Hooks），使用自定义样式钩子可以减少样式表的耦合，提高样式表的复用性和可维护性，使样式代码更加整洁。
使用如下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------------------
------ - --------------- -------------- ---------- - ---- ---------------------------
----- ----- - ----------------
----------- -
----------- --------
--
-------- -
-------- -
----- ----------
--
---------- -
----- ----------
--
--
---
----- --------- - ------------------ -- --
------- -
------- -----------------
--
----
-------- ----- -
----- ------- - ------------
------ -
-------------- --------------
------- -------------------------- --------------------------------
------- -------------------------- ------------------------------------
----------------
--
-
------ ------- ----在上面的示例中，我们创建了一个名为 button 的自定义样式钩子，该样式钩子定义了一个名为 button 的样式，我们在 Button 组件中使用了该样式，达到了高度复用的效果。
useTheme
useTheme 是 Material-UI 提供的一个钩子函数，主要用来获取当前主题（theme），可以通过该钩子函数获取全局配置的主题，然后在样式钩子中使用。
使用如下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------------------
------ - --------------- -------------- ---------- - ---- ---------------------------
------ -------- ---- ------------------------------------
----- ----- - ----------------
----------- -
----------- --------
--
-------- -
-------- -
----- ----------
--
---------- -
----- ----------
--
--
---
----- --------- - ------------------ -- --
------- -
------- -----------------
------- ---- ----- -------------------------------
--
----
-------- ----- -
----- ------- - ------------
----- ----- - -----------
------ -
-------------- --------------
------- -------------------------- --------------------------------
------- -------------------------- ------------------------------------
----------------
--
-
------ ------- ----在上面的示例中，我们通过 useTheme 钩子获取全局配置的主题，并在样式钩子中使用。
总结
@material-ui/styles 是一款非常方便的 Material-UI 样式管理库，通过本篇文章的介绍，我们可以了解到如何使用 ThemeProvider、makeStyles、useTheme 等 API 来定义主题、自定义样式钩子以及获取主题，从而打造属于自己的高度有效的样式系统。希望本文对广大前端开发者有所借鉴和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/95073