How to use parent CSS in Child component in Angular

In this tutorial, we are going to learn how to use the CSS of a parent component in a child component in Angular. Before starting this tutorial, let's think about why parent CSS is not available for a child component. The answer is that Angular provides a mechanism to encapsulate component CSS into the component view without affecting the rest of the application.

Understanding the Problem

Let’s say we have two components:

• Parent Component: Home
• Child Component: List

By default, styles defined in home.component.css will not be available in list.component.css. This is because Angular’s ViewEncapsulation ensures that styles are scoped within each component.

Methods to Apply Parent Styles to Child Component

1. Use Global Styles (styles.css or styles.scss)

If you want styles to apply across multiple components, the simplest approach is to define them in styles.css or styles.scss (depending on your Angular project setup).

Example:

/* styles.css */
.parent-class {
  color: blue;
  font-size: 20px;
}

Now, any child component using .parent-class will inherit these styles.

2. Disable ViewEncapsulation in Child Component

Another way to apply parent styles to a child component is by disabling Angular’s view encapsulation.

Example: Modify the child component’s TypeScript file:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  encapsulation: ViewEncapsulation.None  // Disables encapsulation
})
export class ListComponent {}

Now, the parent’s styles will apply to the child component.

3. Use ::ng-deep to Force Styles in Child Component

The ::ng-deep pseudo-class can be used to override styles in child components.

Example:

/* home.component.css */
::ng-deep .child-class {
  color: red;
  font-weight: bold;
}

However, ::ng-deep is deprecated and not recommended for future versions of Angular.

4. Use a Shared Stylesheet

You can create a shared stylesheet and import it into both parent and child components.

Example: Create a shared-styles.css file:

.shared-style {
  background-color: lightgray;
  padding: 10px;
}

Now, import it into both parent and child components:

@import "../shared-styles.css";

5. Manually Apply Parent Class to Child Component

A simple approach is to apply the parent’s class to the child component manually.

Example:

<!-- home.component.html -->
<div class="parent-class">
  <app-list></app-list>
</div>

Now, the child component inherits the parent class styles.

Conclusion

There are multiple ways to apply parent CSS in a child component in Angular. The best approach depends on your project requirements:

• Global styles for a consistent look across the application.
• Disabling ViewEncapsulation if you want all styles to be inherited.
• ::ng-deep as a temporary workaround.
• Shared stylesheets for better reusability.
• Manually applying classes for quick fixes.

Choose the method that best suits your application’s needs and maintainability. 

Happy coding! 🚀