CSS中的Angular Material 2目标元素

Question

我使用 Angular Material 使 UI 更“谷歌风格”，但我想在某些时候操作默认 CSS。例如，这是我的标记/角度材料代码：

   <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

对于角材料，您需要使用::ng-deep。

在你的css中做：

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