css - CSS 中的 Angular Material 2 目标元素

Question

我使用 Angular Material 使 UI 更加“谷歌风格”，不过，我想在某些时候操作默认的 CSS。例如，这是我的标记/Angular Material 代码:

   <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> 

我想替换标签中的一些默认值，例如:

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

但它不起作用..

我的 CSS 位置如下:

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

任何应用于其他元素的 CSS 都效果很好。对于 Angular Material 元素，则不然。

欢迎任何帮助!

Answer 1

对于 Angular Material ，您需要使用 ::ng-deep。

在你的CSS中做:

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