无法使用mat-tab或mat-ink-bar（角度）自定义CSS

Question

我尝试了多种方法在CSS中调用mat-taband mat-ink-bar。我有类似这样的HTML，例如：

 </div>
    <mat-card>
      <mat-tab-group>
        <mat-tab label="Login">
          <app-login></app-login>
        </mat-tab>
      </mat-tab-group>
    </mat-card>
</div>

我正在该组件的CSS中自定义样式。我可以进入开发人员工具并直接在浏览器中修改元素的CSS，但是在CSS文件中调用这些元素时遇到了困难。

单击该特定元素后，在开发人员工具的“样式”部分中，我可以看到它位于下方.mat-tab-header，并且成功修改了一些值。我在CSS文件中调用它时无法正常工作。

元素分解如下（希望这会有所帮助）：

<mat-card class="mat-card">
  <mat-tab-group class="mat-tab-group mat-primary">
    <mat-tab-header class="mat-tab-header">
      <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled>
      <div class="mat-tab-label-container">
        <div class="mat-tab-list">
          <div class="mat-tab-labels">
            <div class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted">
            <mat-ink-bar class="mat-ink-bar">

如何在CSS中正确调用这些元素，以便修改其样式？

Answer 1

尝试 :host ::ng-deep .mat-tab-header { } 如果仍然没有变化，请添加 !important。