React Material-UI 是一个基于 React 的 UI 库，它实现了 Material Design 的设计规范。它提供了一个组件库，使用起来非常简单。本文介绍如何使用 npm 包 react-material-ui，并提供示例代码。
安装
在项目中安装 react-material-ui，首先需要 npm (Node.js 包管理器)。打开终端并运行以下命令进行安装：
npm install @material-ui/core
通过该命令进行安装可以得到最新版本的 react-material-ui。
使用
在 React 应用中使用 react-material-ui 首先需要在应用程序中导入所需的部件。例如，以下代码导入了 react-material-ui 圆形进度：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- -------------------------------------
-------- ----- -
------ -
-----
----------------- --
------
--
-
------ ------- ----在这里，我们首先从 react 模块导入 React 对象，然后从 react-material-ui 模块导入 CircularProgress。在应用程序的代码中，我们使用了 CircularProgress 组件。接下来，我们将<CircularProgress />组件放入 HTML 的 div 元素中并将其返回。
另一个示例，我们将react-material-ui 的文本框添加到我们的应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------------
-------- ----- -
------ -
-----
---------- ------------ --
------
--
-
------ ------- ----在此示例中，我们从 react-material-ui 中调入了 TextField 组件。我们将这个组件放入我们的 div 元素中，设置 label 属性。
自定义主题
可以使用 react-material-ui 扩展主题。主题对象包含大量变量，可以使用它来自定义 react-material-ui，以便使其与应用程序的设计目标保持一致。以下示例自定义 react-material-ui 的主题：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ------------- - ---- ---------------------------
------ ------ ---- ---------------------------
----- ----- - ----------------
-------- -
-------- -
----- ----------
--
--
---
-------- ----- -
------ -
-------------- --------------
-----
------- ------------------- ----------------
------ -----
---------
------
----------------
--
-
------ ------- ----在这里代码中，我们首先导入了 createMuiTheme 和 ThemeProvider，用于自定义主题。然后我们创建自己的主题，并创建一个应用程序。之后，我们将自定义的主题传递给主题提供器，应用程序中比如按钮的颜色就有我们自己的定制颜色了。在主题对象上，我们定义了 primary 的默认颜色为蓝色。
总结
在本文中，我们介绍了如何使用 npm 包 react-material-ui，首先需要安装，然后可以导入所需的部件将其集成到 React 应用程序中。我们还讲解了如何自定义 react-material-ui 的主题以使其符合应用程序的设计指南。这些功能能够简化您的前端工作，加快软件开发周期。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570b81e8991b448d3f43