前言
React-MDL 是基于 Material Design Lite 构建的 React 组件库。但是，它的缺点是官方支持的组件有限，难以满足实际需求。因此，@jguffey 开发了 @jguffey/react-mdl-extra，以提供更多的 React-MDL 组件。
本文将介绍 @jguffey/react-mdl-extra 的使用教程，包括安装、导入以及使用方法。
安装
可以通过 npm 包管理器来安装 @jguffey/react-mdl-extra：
npm install --save @jguffey/react-mdl-extra
导入
导入 @jguffey/react-mdl-extra 组件分两种方式：
1. 全部导入
import * as Extra from '@jguffey/react-mdl-extra';
2. 按需导入
import { ComponentName } from "@jguffey/react-mdl-extra";可以选择需要导入的组件名称，减少代码体积。
使用
1. Dialog
Dialog 是一个弹出框组件，用于展示一些内容，例如：确认提示、输入框、消息展示、选择等。
-- -------------------- ---- -------
------ - ------- ------------ -------------- -------------- ------ - ---- ---------------------------
-------- --------------- -
----- - ------- -------- ------ -------- ------- - - ------
------ -
------- ------------- ------------------
----------------------------------
----------------------------------------
----------------------------------------
---------
-
-2. Icon
Icon 是一个图标组件，用于展示 Material Design Lite 图标。
-- -------------------- ---- -------
------ - ---- - ---- ---------------------------
-------- ------------- -
----- - ----- ------- - - ------
------ -
----- ----------- ----------------- --
-
-3. Snackbar
Snackbar 是一个消息提示组件，用于展示一些消息，例如：操作成功、网络错误等。
-- -------------------- ---- -------
------ - -------- - ---- ---------------------------
-------- ------------ -
----- ----------------- - -- -- ---
------ -
---------
---------------
-----------
---------------------------------
--
-
-结语
本文介绍了 @jguffey/react-mdl-extra 的使用教程，包括安装、导入以及使用方法。希望本文对读者有所帮助，并能够更好的开发 React-MDL 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d881e8991b448d4e42