How to Style Angular Child Components from a Parent Component's CSS?

How to Style Child Components from Parent Component's CSS File?

Problem:

In an Angular application, a parent component contains several child components. The goal is to style the child components using the parent component's CSS file. However, the styles defined in the parent component are not being applied to the child components due to component isolation.

SOLUTION:

UPDATE: Deprecated Feature

Piercing CSS combinators are deprecated in Angular 4.3.0 and later. Avoid using this method if possible.

Latest Approach: ::ng-deep Operator

To style child components from the parent component CSS file, use the ::ng-deep operator. This operator allows styles to pierce through the encapsulation boundaries and affect child components.

:host {
  color: red;
}

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

Old Approach: Piercing CSS Combinators

Before the introduction of ::ng-deep, piercing CSS combinators like >>>, /deep/, and ::shadow could be used. However, this feature is now deprecated and should be avoided.

Example:

:host {
  color: red;
}

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

The above is the detailed content of How to Style Angular Child Components from a Parent Component's CSS?. For more information, please follow other related articles on the PHP Chinese website!