问题描述
您能告诉我，即使我在app.component.css文件中将padding-top设置为20px时，为什么这里仍未应用padding的原因.如果我在styles.css文件中设置它，它将起作用.不确定将css属性移至app.component.css文件时为何不起作用.
Can you tell me why the padding is not getting applied here even though i have the padding-top set to 20px in my app.component.css file.It will work if i set it in the styles.css file. Not sure why its not working when I move the css property to the app.component.css file.
app.component.ts文件:
app.component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.component.html文件:
app.component.html file:
<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文件
app.component.css file
.mat-tab-body-content{
padding-top:20px;
}
推荐答案
在研究@Gilsdav的评论后，我实际上使它起作用了
I actually got it to work after researching about @Gilsdav's comment
在我的app.component.css文件中，将其更改为
In my app.component.css file I changed it to
:host ::ng-deep .mat-tab-body-content{
padding-top:20px
}
它现在正在工作.谢谢！今天学到新东西！:)
Its working now.Thanks! Learned something new today! :)
这篇关于app.component.css中的CSS样式未应用到选项卡主体内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！