CODEWITHSUNDEEP
angularangular-material
Saif Ali
Saif Ali

Reputation: 547

How to change the color of sort arrows in the Data table Header in Angular Material?

I am trying to change the header color of the sorting arrows in the data table of Angular Material. Here is a link to that : Link to the data table.

The default color of the sorting arrows is gary. I want to change to white. Despite of all the efforts I'm not able to change. Please help.

Upvotes: 12

Views: 19279

Answers (5)

Nextor
Nextor

Reputation: 105

In the .css file of the component that contains your table, change this Material variable:

:host{
 --mat-sort-arrow-color: #fff;
}

Upvotes: 0

Максим З
Максим З

Reputation: 1

Add a new class to the global styles and use it in the template

.color-sort-header-arrow-white {
  .mat-sort-header-arrow {
    color: #fff;
  }
}

  <table
    mat-table
    matSort
    class="color-sort-header-arrow-white"
    [dataSource]="dataSource"
  >

Upvotes: 0

Corky3892
Corky3892

Reputation: 535

Ran into a similar issue and after some effort was able to modify the styling with the below code.

::ng-deep .mat-sort-header-arrow {
    color: #fff;
}

Please note as mentioned here: https://blog.angular-university.io/angular-host-context/ the use of ngdeep in this manner will apply to all components which share the element in the current view. So if you have two sorted tables from different components in your view this will disable the arrow in both of them.

To improve this apply a custom class on your mat-sort-header:

<th mat-header-cell mat-sort-header *matHeaderCellDef class="hide-arrow">

And Then update your CSS:

::ng-deep .hide-arrow .mat-sort-header-arrow {
    color: #fff;
}

Now the custom CSS will apply only to the targetted elements

Upvotes: 19

SebastianG
SebastianG

Reputation: 9554

Just had the exact same issue. What I found was that the color is changing but due to the opacity settings, it's not that noticeable.

try something like this:

 .mat-sort-header-arrow {
color: #fff !important;
opacity: 1 !important;
}

Also, make sure you add this in the main style.css file -- doesn't seem to work otherwise. At least didnt work for me.

Let me know if this works for you.

Upvotes: 5

dev-assassin
dev-assassin

Reputation: 271

you can change the color like this:

.mat-sort-header-arrow {
  color: red(color you want) !important;
}

link is this: https://stackblitz.com/edit/angular-scv8ng

Upvotes: 1

Related Questions