前言
前端开发中，UI 组件库是必不可少的。Material Design 是一个设计规范，许多框架都有基于它设计的组件库。Material-UI 是一个基于 React 的 UI 组件库，它是一个由 Google Material Design 设计风格启发的组件库，提供了丰富的组件并提供了许多高级特性和拓展性，很受开发者的喜爱。
在 Material-UI 界面库以外，还有许多针对特定功能需求的 UI 组件库。我们今天要讲的是 Ary Adinata 开发的 Material-UI 拓展库，其中包括许多更加注重可定制化的组件设计。
安装
首先，在项目中执行以下命令，以安装 npm 包：
--- ------- -----------------------
使用
安装完成后，我们可以开始使用这些组件了。要使用它们，首先需要将它们导入你的项目中，然后放置在你需要的位置上。以下是一个简单的示例：
------ ----- ---- --------
------ - ------ - ---- --------------------------
-------- ----- -
------ -
------- ------------------- ----------------
----
---------
--
-这里使用了 Button 组件，我们为其提供了两个属性，一个是 variant，表示该按钮的样式，另一个是 color，表示该按钮的颜色。
作为一个材料设计规范的反映，Material-UI 有很多可用的属性和值，另外我们导入的 @aryadinata/material-ui 扩展库也提供了更多的设计特性。我们可以在官方文档中了解更多，也可以通过查看组件的源代码来获得更多信息。
实际应用
下面是一个真实的使用 Material-UI 和 Ary Adinata 拓展库的代码示例。
------ ----- ---- --------
------ - ----- ------ ---------- - ---- --------------------
------ - ----- ---- - ---- ---------------------
------ -
----------
----------------
---------------
---------
- ---- --------------------------
------ --------- ---- -----------
----- ------- - -
- ----- ----- --- ----- ---- --
- ----- ----- --- ----- ---- --
--
-------- ----- -
----- ------- - ------------
------ -
----- --------- ------------
----- ---- --------
------------------------
-------
----- ---- -------
------ --------------------------
----------- ------------ ---------------
----
-------------
--------
-------
----- ---- -------
------ --------------------------
---------- -----------------
--------------------- -- -
----------------
-----------------
------------------
--------------------------
-----------
--
---
------------
--------
-------
----------------
----------- ---------------------------
-----------------
-------
--
-此处展示了 Material-UI 和 Ary Adinata 拓展库共同使用的示例，包括主题和按钮等组件。应用程序使用了 Material-UI 官方的快速拨号和自定义浮动按钮组件，同时使用了 Ary Adinata 拓展库中的标题栏组件。
总结
Material-UI 和其它 UI 框架一样，允许开发人员快速构建漂亮而功能丰富的应用程序。Ary Adinata 拓展库增强了 Material-UI 的扩展范围，允许开发人员更加细致地调整每个组件的外观和行为。学习这些库需要时间和耐心，但将它们添加到你的工具箱中，将会让你的开发过程更加顺畅、富有创造性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590981e8991b448d66db