无法在 Angular 6 中更改标签的高度和颜色答案

【问题标题】：Not able to change tab's height, colour in Angular 6无法在 Angular 6 中更改标签的高度和颜色
【发布时间】：2020-10-22 21:54:54
【问题描述】：

我是 Angular、CSS 和 Html 的新手。我使用 MatTabsModule(import { MatTabsModule } from '@angular/material/tabs';) 创建选项卡，但我能够调整/更改高度、背景等。简而言之，我无法覆盖 MatTabsModule 的默认属性类。请帮我。下面是我的 CSS 和 Html 代码。我希望不需要 Typescript 代码。

HTML：-

<mat-card>
 <mat-card-content>
  <mat-tab-group class="tab-group" dynamicHeight>
      <mat-tab *ngFor="let obj of tags">
          <ng-template mat-tab-label>{{ obj.name }}</ng-template>
          <div class="tab-content">
              {{ obj.name }}
          </div>
      </mat-tab>
  </mat-tab-group>
</mat-card-content>

CSS：-

.tab-group {
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;

  .unicorn-dark-theme & {
    border-color: #464646;
  }
}

.tab-content {
  padding: 16px;
}

mat-card{
  padding: 0px;
}

.mat-tab-label .mat-ripple {
  min-width: 0;
  height: 30px;
}

我无法更改这些选项卡的高度宽度背景颜色.. :(

【问题讨论】：

标签： html css angular angular5

【解决方案1】：

您无法从您的 css 文件中访问子组件的样式，因为 ViewEncapsulation.Emulated 可以防止样式泄漏到应用程序的其余部分（应该如此，不要更改它）。

如果您像这样使用 ng-deep-selector：:host ::ng-deep mat-tab { ... }，您可以覆盖无法以任何其他方式配置的默认材质样式。我这么说是因为从组件中泄漏 css 被认为是一种不好的做法，如果可能的话，你应该使用 @Input 来传递样式。

顺便说一句，:host 在那里，所以样式只泄漏到这个组件的子组件，而不是应用程序的其余部分

【讨论】：

【解决方案2】：

要覆盖角材质元素的默认样式，您需要在 CSS 样式中添加前缀 ::ng-deep。

这是控制标签高度和宽度的方法

::ng-deep .mat-tab-label{
height: 27px !important;
min-height: 0px!important;
margin: 3px!important;
}

【讨论】：