Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
}
like image 991
Avocado Avatar asked Jan 09 '20 19:01

Avocado


People also ask

How do I change the color of my mat divider?

You need to overrule . mat-divider class styling in your own written CSS and change the border-top-color property. is the default styling by Angular Material. This should be enough to change it (if your CSS gets rendered later than Material's).

How do you increase the thickness of a mat divider?

To change the thickness of the mat-divider, override the default border-top-width or border-top-style properties of . mat-divider class.

What is inset divider?

Inset dividers separate related content, such as sections in a list of contacts or emails in a conversation. Inset dividers should be used in conjunction with anchoring elements such as icons or avatars aligned with the Title Key Line. Example of inset divider.


2 Answers

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.

like image 161
Roy Avatar answered Oct 19 '22 11:10

Roy


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

like image 1
Rohit Jain Avatar answered Oct 19 '22 11:10

Rohit Jain