CSS style from app.component.css not getting applied to the tabs body content

Question

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

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

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

}

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 file

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

Answer 1

In the root directory ( where the main.ts is ) there's a style.css or style.scss ( depends on what you chose ) - placing the code there - is global.

I believe that app.component.scss applies only to app.component.html directly ( lazy load pages aren't getting that css )

Answer 2

I actually got it to work after researching about @Gilsdav's comment

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! :)