Question

你能告诉我为什么填充没有在这里应用，即使我在我的app.component.css文件中将padding-top设置为20px。如果我在styles.css文件中设置它将会工作。当我将css属性移动到app.component.css文件时，不确定它为什么不起作用。

app.component.ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.component.html文件：

<mat-tab-group class="redThis">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

app.component.css文件

.mat-tab-body-content{
    padding-top:20px;
}

Answer 1

在研究了@ Gilsdav的评论后，我实际上已经开始工作了

在我的app.component.css文件中，我将其更改为

:host ::ng-deep .mat-tab-body-content{
    padding-top:20px
}

现在正在工作。谢谢！今天学到了新东西！ :)

Answer 2

在根目录（main.ts所在的目录）中，有一个style.css或style.scss（取决于您选择的内容）-将代码放置在其中-是全局的。

我相信app.component.scss仅直接适用于app.component.html（延迟加载页面无法获取该CSS）

Answer 3

CSS选择器错误。 “”用于按类选择元素。将CSS更改为以下内容：

mat-tab-body-content{
    padding-top:20px;
}

OR

.redThis{
    padding-top:20px;
}

app.component.css中的CSS样式未应用于选项卡主体内容

3 个答案: