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

1 个答案: