html - 无法更改选项卡的高度，Angular 6 中的颜色

Question

我是 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;
}

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

Answer 1

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

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

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