How to inherit css styles in child component from parent in Angular 5

Question

I have a parent component inside which I have a child component. The parent component have some css classes, where child component extends them. I tried to use :host as looking

Answer 1

Why make things complex?

Ideal way to do would be to add refrence of parent css file in child component as well.

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }

Answer 2

Another alternative to ::ng-deep and referencing the parent's css file, is to use the encapsulation component propertie :

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

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

the parent css with flow to all it's childs.

Answer 3

With ::ng-deep, styles will be applied to the current component, but also trickle down to the components that are children to the current component in the component tree.

Example:

:host ::ng-deep app-child-component {
       color:yellow;
     }

A good resource - Styles Between Components in Angular 2+