CODEWITHSUNDEEP
cssangularangular-material
Georgios
Georgios

Reputation: 1483

Angular Material 2 target elements in CSS

I use Angular Material to make the UI more "google-style" although, I want to manipulate the default CSS at some points. For example, this is my markup/angular-material code:

   <mat-tab-group>
  <mat-tab label="Experience">
        <div *ngFor="let item of experienceItems"> 
          <mat-card>
             <mat-card-header>
             <mat-card-title> {{item?.startDate}} - {{item?.endDate}} <span class="card-company">{{item?.company}} - {{item?.location}}</span></mat-card-title>
              <mat-card-subtitle>{{item?.jobTitle}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <i class="fa fa-keyboard-o" aria-hidden="true"></i>{{item?.description}}
            </mat-card-content> 
          </mat-card> 
          <br/>
       </div>
  </mat-tab>
</mat-tab-group>

I want to replace some default values from the label like:

.mat-tab-label{
    text-transform: uppercase;
    color: white;
    /*remove min-width*/
}

but it doesn't work..

My CSS is located like:

@Component({
  selector: 'app-about',
  templateUrl: './template/app-about.html',
  styleUrls: ['./css/style.css']
})

Any CSS applying to other elements, works pretty good. For Angular Material elements, it doesn't.

Any help is welcome!

Upvotes: 2

Views: 873

Answers (1)

Mike Tung
Mike Tung

Reputation: 4821

For angular material you'll need to use ::ng-deep.

In your css do:

::ng-deep .mat-tab-label {
 text-transform: uppercase;
    color: white;
    /*remove min-width*/
}

Upvotes: 5

Related Questions