关于html：在Angular 6中无法更改标签的高度，颜色

Not able to change tab's height, colour in Angular 6

我是新的Angular，CSS和HTML。
我已经使用MatTabsModule(从'@ angular / material / tabs';导入{MatTabsModule};)创建标签，但是我能够调整/更改高度，背景等。总之，我无法覆盖MatTabsModule的默认属性类。请帮我。
以下是我的CSS和HTML代码。我希望不需要Typescript代码。

HTML：-

1
2
3
4
5
6
7
8
9
10
11

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

{{ obj.name }}

</mat-tab>
</mat-tab-group>
</mat-card-content>

CSS：-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

I'm not able to change height width of these tabs

我无法更改这些标签的高度，宽度，背景色.. :(

您不能以ViewEncapsulation的形式从css文件中访问子组件的样式。Emulated可以防止样式泄漏到应用程序的其余部分(应该更改，请勿更改)。

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

顺便说一句，：host在那里，所以样式只泄漏给该组件的子组件，而不泄漏给应用程序的其余部分

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

这样可以控制标签的高度和宽度

1
2
3
4
5

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