El estilo CSS de app.component.css no se aplica al contenido del cuerpo de las pestañas - angular

¿Me puede decir por qué el relleno no se está poniendoaplicado aquí aunque tengo el padding-top establecido en 20px en mi archivo app.component.css. Funcionará si lo configuro en el archivo styles.css. No estoy seguro de por qué no funciona cuando muevo la propiedad css al archivo app.component.css.

archivo app.component.ts:

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

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

}

archivo 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>

archivo app.component.css

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

Respuestas

De hecho, lo hice funcionar después de investigar sobre el comentario de @Gilsdav

En mi archivo app.component.css lo cambié a

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

Está funcionando ahora. ¡Gracias! ¡Aprendí algo nuevo hoy! :)

El selector CSS está mal. "." se usa para seleccionar elementos por clase. Cambie el CSS a lo siguiente:

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

O

.redThis{
padding-top:20px;
}