时间戳

首页 > 解决方案 > 无法在 Angular 6 中更改标签的高度和颜色

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

问题描述

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

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

我无法更改这些选项卡的高度宽度

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

标签： htmlcssangularangular5

解决方案

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

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

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

推荐阅读