无法使用 mat-tab 或 mat-ink-bar (Angular) 自定义 CSS

Question

我尝试了多种方法在我的 CSS 中调用 mat-tab 和 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。