Как изменить цвет мат-делителя?

Question

Можно ли изменить цвет мат-делителя? Я попробовал следующее, он не работал

компонент. html

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

component.s css

.material-devider{
color: red
}

Answer 1

Да, вы можете.

Вам нужно отменить .mat-divider стиль в собственном написанном CSS и изменить свойство border-top-color.

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

- стиль по умолчанию на Angular Материал.

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

должно быть достаточно для его изменения (если ваш CSS будет обработан позже, чем Материалы). В противном случае поможет увеличение специфичности для вашего CSS класса (например, .mat-divider.mat-divider).

Пример StackBlitz для этого случая .

Answer 2

Чтобы изменить цветовой разделитель матов, просто измените свойство border-top-color класса .mat-divider.

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

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