Styl CSS z app.component.css nie jest stosowany do treści treści kart - kątowe

Czy możesz mi powiedzieć, dlaczego nie ma wypełnieniazastosowano tutaj, mimo że w moim pliku app.component.css mam zestaw dopełnień ustawiony na 20 pikseli. Będzie działać, jeśli ustawię go w pliku styles.css. Nie jestem pewien, dlaczego nie działa, gdy przenoszę właściwość css do pliku app.component.css.

plik app.component.ts:

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

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

}

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

plik app.component.css

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

Odpowiedzi:

Właściwie to zadziałało po zbadaniu komentarza @Gilsdav

W moim pliku app.component.css zmieniłem go na

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

Już działa. Dzięki! Nauczyłem się dziś czegoś nowego! :)

Selektor CSS jest nieprawidłowy. „.” służy do wybierania elementów według klasy. Zmień CSS na:

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

LUB

.redThis{
padding-top:20px;
}