Wie kann ich die CSS-Eigenschaften untergeordneter Komponenten in Angular 4 mit ::ng-deep überschreiben?

Überschreiben von CSS-Eigenschaften untergeordneter Komponenten mit ::ng-deep in Angular 4

In Angular 4 ermöglicht der Selektor ::ng-deep dies Sie können CSS-Eigenschaften untergeordneter Komponenten im CSS der übergeordneten Komponente überschreiben. Dies wird erreicht, indem die Schatten-DOM-Grenze der untergeordneten Komponenten durchbrochen wird.

Verwendung:

Um ::ng-deep zu verwenden, stellen Sie es einfach dem CSS-Selektor voran das auf das Element der untergeordneten Komponente abzielt, etwa so:

<code class="css">::ng-deep .child-component {
  /* CSS properties to override */
}</code>

Beispiel:

Bedenken Sie die folgende HTML-Struktur:

<code class="html"><parent-component>
  <child-component class="child"></child-component>
</parent-component></code>

Zu überschreiben Um die Stile der p-Elemente innerhalb der untergeordneten Komponente zu ändern, können Sie das folgende CSS in der übergeordneten Komponente verwenden:

<code class="css">::ng-deep .child p {
  color: red;
}</code>

IE11-Unterstützung:

::ng -deep wird in Internet Explorer 11 nicht unterstützt. Wenn Sie IE11 unterstützen müssen, sollten Sie stattdessen den alternativen Selektor :host-context() verwenden. Allerdings hat :host-context() seine eigenen Einschränkungen und ist möglicherweise nicht für alle Fälle geeignet.

Das obige ist der detaillierte Inhalt vonWie kann ich die CSS-Eigenschaften untergeordneter Komponenten in Angular 4 mit ::ng-deep überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!