如何更改垫分隔器的颜色？

Question

是否可以更改mat-divider颜色？ 我尝试了以下，它没有工作

组件.html

<mat-divider class="material-devider"></mat-divider>

组件.scss

.material-devider {
    color: red
}

Answer 1

是的你可以。

您需要在自己编写的 CSS 中否决.mat-divider类样式并更改border-top-color属性。

.mat-divider {
    border-top-color: rgba(0, 0, 0, 0.12);
}

是 Angular Material 的默认样式。

.mat-divider {
    border-top-color: red;
}

应该足以改变它（如果你的 CSS 比 Material 的渲染晚）。 否则，为您的 CSS 类添加更高的特异性会有所帮助（fe .mat-divider.mat-divider ）。

此案例的 StackBlitz 示例。

Answer 2

要更改颜色 mat-divider 只需更改 .mat-divider 类的 border-top-color 属性。

.mat-divider {
  border-top-color: red;
}

https://www.angularjswiki.com/angular/angular-material-divider-mat-divider-example/#mat-divider-color

Answer 3

这篇文章应该可以帮助你：

::ng-deep {
    .mat-divider {
      border-top-color: red;
   }

}