简介
Material UI 是一个基于 React 软件包的用于网页应用程序的组件库。该组件库以 Material Design 的标准为基础，提供了开箱即用的组件，如按钮、表单字段、菜单、弹出框、图标等等。
Material UI 的设计概念是轻量级、响应式和易于自定义。使用 Material UI，你可以为你的网页应用程序创建一个具有现代化设计感的用户界面。
本篇教程将介绍如何使用 NPM 包 material-ui-0.19.0 来开发网页应用程序。
安装
在使用 material-ui-0.19.0 之前，你需要在你的项目中安装该软件包。
你可以使用以下命令在你的项目中安装 material-ui-0.19.0：
npm install material-ui@0.19.0 --save
安装完成后，在你的项目文件夹中，你应该可以看到 node_modules 目录下有 material-ui 文件夹。
使用
在你的应用程序中使用 Material UI 的流程如下：
- 导入所需的 Material UI 组件
- 渲染用户界面中的组件
可以通过以下步骤将 Material UI 组件集成到网页应用程序中：
第一步是在你的代码中导入所需的 Material UI 组件。你可以使用以下命令来导入 Button 组件：
import Button from 'material-ui/Button';
第二步是在你的代码中调用所需的组件并将其渲染到网页应用程序中。你可以使用以下代码来将 Button 组件渲染到你的应用程序中：
<Button variant="raised" color="primary"> Click me! </Button>
这是一个非常基本的例子，但它足以启动 Material UI 的使用。
示例代码
以下是一个更完整的示例代码，用于演示如何使用 Material UI 来构建一个基本的网页应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------- ---- --------------------------------------
------ ------------ ---- ---------------------------
----- --- - -- -- -
------------------
------------- ------------ ---- --
-------------------
--
----------------
---- ---
-------------------------------
--在这个例子中，我们导入了 MuiThemeProvider 和 RaisedButton 组件，并使用它们来渲染一个带有标签“Click me!”的按钮。
总结
Material UI 是一个强大而易于使用的组件库，它可以帮助你快速为你的网页应用程序创建现代化的用户界面。本篇教程介绍了如何使用 NPM 包 material-ui-0.19.0 来集成 Material UI 到你的网页应用程序中，包括安装、使用和一个完整的示例代码。希望这篇教程可以帮助你开始使用 Material UI，并构建出美观、现代化的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fce81e8991b448dd560