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

2024-03-13

你能告诉我为什么这里没有应用填充,即使我在 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;
}

在研究了@Gilsdav 的评论后,我实际上让它发挥了作用

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

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

现在可以使用了。 谢谢!今天学到了新东西! :)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

app.component.css 中的 CSS 样式未应用于选项卡正文内容 的相关文章