CODEWITHSUNDEEP
htmlcssangularsassangular-material
Avocado
Avocado

Reputation: 327

How to change color for mat-divider?

Is it possible to change mat-divider color? I tried the following, it didn't work

component.html

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

component.scss

.material-devider {
    color: red
}

Upvotes: 20

Views: 21307

Answers (3)

titusfx
titusfx

Reputation: 2016

If you use

  <mat-divider class="mat-divider" [vertical]="true"></mat-divider>

Then the change is with the border-right-color:

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

Upvotes: 1

Roy
Roy

Reputation: 8069

Yes, you can.

You need to overrule .mat-divider class styling in your own written CSS and change the border-top-color property.

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

is the default styling by Angular Material.

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

This should be enough to change it (if your CSS gets rendered later than Material's). Otherwise adding increased specificity to your CSS class will help (f.e..mat-divider.mat-divider).

StackBlitz example for this case.

Upvotes: 30

Rohit Jain
Rohit Jain

Reputation: 2092

To change the color mat-divider simply change the border-top-color property of .mat-divider class.

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

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

Upvotes: 2

Related Questions