無法使用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。