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*/
}

Angular Material 2 CSS中的目标元素

1 个答案: