Go Deep or Go Home: a Better Way to Affect Descendant Component Styles in Angular

By default, Angular uses the emulated encapsulation strategy to make the component styles encapsulated. This means that if we want to override a component style from our parent, we need to use the ::ng-deep selector. For example:

The above works, but I’m not a big fan of this approach.

A better approach is to leverage CSS variables:

Using CSS variables is a cleaner and scalable approach. It’s also easier to refactor the child component layout without breaking anyone that overrides its styles because the parent isn’t referring to a specific selector.

Make sure to use it only when it makes sense. There is no need to add it to any property.