无法使用 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.

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

Unable to customize CSS with mat-tab or mat-ink-bar (Angular)

html

css

element

developer-tools

angular