没有 app-theme 的 mat-progress-bar 样式 - CSS

简介

Mat-progress-bar 是 Angular Material 中用来显示进度的组件。在使用 mat-progress-bar 时，我们经常会从主题中获取到特定的颜色和样式。

如果你想要使用无主题（没有 app-theme）的 mat-progress-bar 样式，那么本文就是为你准备的。

实现

实现无主题的 mat-progress-bar 样式非常容易。只需在 CSS 中添加以下代码即可：

.mat-progress-bar {
  background-color: gray;
  height: 5px;
}
.mat-progress-bar-fill::after {
  background-color: blue;
}

以上代码会将 mat-progress-bar 的背景色设置为灰色，高度设置为 5px。.mat-progress-bar-fill::after 选择器会将进度条颜色设置为蓝色。

代码解析

在上面的 CSS 代码中，我们首先通过 .mat-progress-bar 选择器为 mat-progress-bar 设置了一个灰色的背景色，高度设置为 5px。

接着，我们使用了 .mat-progress-bar-fill::after 选择器。该选择器会选择进度条中的 ::after 伪元素（也就是进度条的填充部分），并将其背景色修改为蓝色。

使用示例

要使用无主题的 mat-progress-bar 样式，我们只需在 HTML 文件中添加以下代码即可：

<mat-progress-bar value="50" class="mat-progress-bar"></mat-progress-bar>

如上所述，我们只需要将 .mat-progress-bar 类添加到 mat-progress-bar 元素中即可应用无主题样式。

总结

本文介绍了如何在没有 app-theme 的情况下使用 mat-progress-bar 组件。我们编写了一些简单的 CSS 代码，从而实现了无主题的 mat-progress-bar 样式。

希望这篇文章对你有所帮助！