Change Angular mat chip default colors

Admin 1
Viewed 7727

I'm new to Angular and I'm trying to to change mat chip default colors using global CSS file but some reason it won't let me change the default chip color and inside text color.

Homepage.component HTML

      <mat-chip-list>
        <mat-chip>Tag1</mat-chip>
      </mat-chip-list>

Global CSS

.mat-chip{
    background-color:mat-color($accent);
    color: mat-contrast($positive,50);
}

This is what it look like inside mat-card

angular-material angular tags css styles
1 Answers

You can use !important operator, as below :

.mat-chip{
  background-color: mat-color($accent) !important;
  color: mat-contrast($positive,50) !important;
}
user_47866200
Related