不能在没有 ::ng-deep 和 !important 的情况下设置 mat-tab 的样式

Question

我有一些组件在 HTML 中使用 mat-tab 元素。当尝试在 CSS 中设置这些元素的样式时，我只能使用::ng-deep .mat-tab-label {}例如，并放置!important在至少一个样式更改旁边。我不想把这个长期留在应用程序中，尤其是在阅读了这篇文章之后。

以下是它如何分解查看开发人员工具中的元素：

<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">

我能为了做样式而不使用这些要素::ng-deep并!important在CSS？

Answer 1

我该怎么做才能在不使用 CSS 中的 ::ng-deep 和 !important 的情况下设置这些元素的样式？

在这种情况下，您可以做的解决方案是使用Selector 特异性，然后将您的样式放在根样式 /src/styles.css 中（注意：不要将它放在组件 styleUrls 中，您的样式将不起作用）

/* label style */
.mat-tab-label{
  background: green;
  color:white;
}
/* focus style */
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{
  background: red;
}
/* ink bar style */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: yellow;
  height: 10px;
} 

要查看实时示例代码，请查看此链接 - https://stackblitz.com/edit/dmgrave-ng-so-anser-tabs-style?file=styles.css

希望这可以帮助。