没有使用 ::ng-deep 和 !important 无法对 mat-tab 进行样式设置。

Question

没有使用 ::ng-deep 和 !important 无法对 mat-tab 进行样式设置。

6

我有一些组件在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">

如何在CSS中不使用::ng-deep和!important的情况下样式化这些元素？

- tb517

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davecar21 · Accepted Answer

我该怎样在不使用 ::ng-deep 和 !important 的情况下给这些元素添加样式呢？

在这种情况下，您可以使用选择器特异性，然后将样式放在根样式 /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。希望这能有所帮助。