Štýl CSS z aplikácie app.component.css sa na obsah tela kariet neuplatňuje - hranatý

Môžete mi povedať, prečo sa vypchávky nedostávajúaplikované tu, aj keď mám v mojom súbore app.component.css padding-top nastavený na 20px. Bude to fungovať, ak to nastavím v súbore styles.css. Nie ste si istí, prečo to nefunguje, keď presuniem vlastnosť css do súboru app.component.css.

súbor app.component.ts:

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

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

}

súbor 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>

súbor app.component.css

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

odpovede:

Vlastne som to dostal do práce po preskúmaní komentára @Gilsdav

V mojom súbore app.component.css som to zmenil na

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

Teraz to funguje. Vďaka! Dnes som sa dozvedel niečo nové! :)

Selektor CSS je nesprávny. „.“ sa používa na výber prvkov podľa triedy. Zmeňte CSS na toto:

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

OR

.redThis{
padding-top:20px;
}