Wie formatiere ich untergeordnete Angular-Komponenten aus dem CSS einer übergeordneten Komponente?

Wie formatiere ich untergeordnete Komponenten aus der CSS-Datei der übergeordneten Komponente?

Problem:

In einer Angular-Anwendung ein übergeordnetes Element Die Komponente enthält mehrere untergeordnete Komponenten. Das Ziel besteht darin, die untergeordneten Komponenten mithilfe der CSS-Datei der übergeordneten Komponente zu formatieren. Allerdings werden die in der übergeordneten Komponente definierten Stile aufgrund der Komponentenisolation nicht auf die untergeordneten Komponenten angewendet.

LÖSUNG:

UPDATE: Veraltete Funktion

Durchdringende CSS-Kombinatoren sind in Angular 4.3.0 und höher veraltet. Vermeiden Sie nach Möglichkeit die Verwendung dieser Methode.

Neuester Ansatz: ::ng-deep-Operator

Um untergeordnete Komponenten aus der CSS-Datei der übergeordneten Komponente zu formatieren, verwenden Sie den ::ng -tiefer Operator. Mit diesem Operator können Stile die Kapselungsgrenzen durchdringen und untergeordnete Komponenten beeinflussen.

:host {
  color: red;
}

:host ::ng-deep parent {
  color: blue;
}

Alter Ansatz: CSS-Kombinatoren durchdringen

Vor der Einführung von ::ng- Es könnten tiefe, durchdringende CSS-Kombinatoren wie >>>, /deep/ und ::shadow verwendet werden. Diese Funktion ist jedoch mittlerweile veraltet und sollte vermieden werden.

Beispiel:

:host {
  color: red;
}

:host >>> parent {
  color: blue;
}

Das obige ist der detaillierte Inhalt vonWie formatiere ich untergeordnete Angular-Komponenten aus dem CSS einer übergeordneten Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!