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

【问题标题】：CSS style from app.component.css not getting applied to the tabs body contentapp.component.css 中的 CSS 样式未应用于选项卡正文内容
【发布时间】：2018-09-19 05:01:43
【问题描述】：

您能告诉我为什么即使我的 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;
}

【问题讨论】：

CSS 封装在 Angular 上。使用 :host deep 允许这样做或将您的样式放在样式上。（s）css。查看文档：angular.io/guide/component-styles：
我认为你有错误的选择器......在你的 css 中你正在指定 mat-tab-body-content。您可以尝试将您的 app.css 定义更改为 .mat-tab{padding-top:20px}
与此相同的问题：stackoverflow.com/questions/49540906/…

标签： angular

【解决方案1】：

在研究了@Gilsdav 的评论后，我实际上得到了它的工作

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

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

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

【讨论】：

注意：ng-deep 将是 deprecated。如果您可以安全地将 padding-top 应用于所有材质选项卡内容，那么您可以将其放在您的 styles.css 中以全局应用它。
一个简单问题的可怕解决方案
如果有人在开始使用 Angular 之前告诉我这已经存在，我会拒绝使用它。

【解决方案2】：

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

我相信 app.component.scss 仅适用于 app.component.html 直接（延迟加载页面没有得到那个 css）

【讨论】：