Angular Material UI 组件是 Angular 框架下的一套 UI 组件库，它提供了一系列的预构建组件，包括按钮、卡片、对话框、侧边栏等等，用于快速构建现代化的网站和 Web 应用程序。在本文中，我们将深入探讨如何在 Angular 项目中使用 Angular Material UI 组件。
环境准备
在开始使用 Angular Material UI 组件前，需要确保你已经安装了 Angular 并创建了一个 Angular 项目。如果你还没有安装 Angular，可以参考Angular 官方文档进行安装和设置。
接下来，我们需要在项目中安装 Angular Material UI 组件。打开终端并切换到项目的目录下，输入以下命令安装 Angular Material UI：
ng add @angular/material
该命令将会自动地安装并配置好 Angular Material UI 组件。安装完成后，你需要在项目的根模块中注册一下 Angular Material UI 的模块，这样才能在组件中使用它提供的组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ---------------- - ---- ----------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们使用了 MatToolbarModule 模块来展示 Angular Material UI 组件库中的一个工具栏组件。
组件的使用
在注册好 Angular Material UI 的模块后，我们就可以愉快地使用它提供的组件了。我们以一个按钮为例，看一看如何使用它提供的组件。
在组件模版文件中添加以下代码：
<button mat-raised-button>Click me!</button>
这里，我们使用的是 mat-raised-button 组件，就是 Angular Material UI 中提供的按钮组件。它的功能与普通的 HTML 按钮相同，但它的外观与风格是由 Angular Material UI 提供的。
组件样式的自定义
使用 Angular Material UI 的样式不一定符合你的需求和品味，你可以对它进行自定义。通过样式，你可以修改这些组件的颜色、背景、字体等等。这里，我们将以修改按钮背景色为例。
首先，在组件样式文件中添加以下代码：
::ng-deep .mat-raised-button {
background-color: tomato;
color: white;
}在这里，我使用了 ::ng-deep 伪类，以便能够正确地访问 Angular Material UI 组件库中的样式。接下来，我将修改按钮的背景色为番茄色，并将字体颜色设为白色。
总结
Angular Material UI 组件库提供了许多方便快捷的组件，以加速组件的开发。回顾一下本文中的内容，我们首先需要完成 Angular 的安装和配置，然后安装并注册 Angular Material UI 的模块。最后，我们使用按钮组件作为示例，介绍了如何使用和自定义 Angular Material UI 的组件样式。
希望本文能够对你有所帮助并增进你对 Angular Material UI 的理解。如果你想了解更多，请参考Angular Material UI 的官方文档。
完整的代码示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ----------------------- ------------
--
------- --
--------- ------------------ -
----------------- -------
------ ------
-
--
--
------ ----- ------------ --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64874bd948841e98945f8e6c