How to Style Child Components from Parent Component'S CSS File

How to style child components from parent component's CSS file?

Update - Newest Way

Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.

Last Update

From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

Old way

You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow

working example : http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

How can i style my child components from parent?

You can put the .css in the styles.css that share all the aplication.

Another option is use ::ng-deep But I don't like so much

The last one is use css variables like this Netanel Basal's article

//in your parent
.chips app-child{
    --bgcolor:red;
}

//in your child
.tags
{
   background-color:var(--bgcolor,pink) //<--use a "pink" by defect
}

a fool example

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

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 { }

Angular change child component style from parent component but not globally

You can use the ::ng-deep pseudo class, to specifically target child elements without changing the view encapsultation for the whole component (which would mean that all its rules would leak).

Note: ::ng-deep has been marked as deprecated for since a few major versions now, but they will not remove suppoprt until they have a workaround.

parentX.html

<div class="compContainer">
    <nextgen-table></nextgen-table>
</div>

parentX.scss

::ng-deep .compContainer nextgen-table
{
    mat-cell:nth-child(1),
    mat-header-cell:nth-child(1) {
        flex: 0 0 40%;
        text-align: left;
    } 
    mat-cell:nth-child(2),
    mat-header-cell:nth-child(2) {
        flex: 0 0 20%;
    }
}

You could also add your css rules to the global style.scss file.

//Rules for parent X
app-parent-componentX .compContainer nextgen-table
{
    mat-cell...
}

//Rules for a parent Y
app-parent-componentY .compContainer nextgen-table
{
    mat-cell...
}

Styling child components template from parent component css angular

You can do this way, in the css of the parent component:

parent.component.css:

:host ::ng-deep .fa-heart {
  color: red;
}

or

:host ::ng-deep app-likes .fa-heart {
  color: red;
}

Style child component differently when it is in different parent components

You can use Angular's ng-deep if you want to affect the styles of its child components.

1.) On you ListingComponent, setup ng-deep and access the card container class

@Component({
  selector: 'listing',
  template: `<ng-content></ng-content>`,
  styles: [
    `
      :host ::ng-deep .card-container { background-color: red; }   // Keep in mind, to include :host which means this component as without it, this style will leak out affecting not only its child component class .card-container but also its siblings derived from another component
    `
  ]
})
export class ListingComponent {}

2.) On you ListingDetailComponent, setup ng-deep and access the card container class

@Component({
  selector: 'listing-detail',
  template: `<ng-content></ng-content>`,
  styles: [
    `
       :host ::ng-deep .card-container { background-color: green; }
    `
  ]
})
export class ListingDetailComponent {}

3.) On you CardComponent, supposedly you have a card container class

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
})
export class CardComponent {}

4.) On your AppComponent, same with your structure

<listing>
  <card></card>
</listing>

<listing-detail>
  <card></card>
</listing-detail>

Here's the StackBlitz demo link for your reference

---

OR If you want to control the styling from the child component, you can do so by specifying :host-context and the parent's class.

Example:

1.) Specify the parent class that we will use to access from our child component (card)

<listing class="list-parent">    
  <card></card>
</listing>

<listing-detail class="list-detail-parent">
  <card></card>
</listing-detail>

2.) On your child component (CardComponent), specify host-context on your styles. This way you can style your parent component in corresponds to their classes.

@Component({
  selector: 'card',
  template: `<div class="card-container">Hi I'm Card</div>`,
  styles: [
    `
      :host-context(.list-parent) { background-color: red; }

      :host-context(.list-detail-parent) { background-color: green; }

    `
  ]
})
export class CardComponent {}

How to override global style from a child component and scope the change only under that component in angular

The simplest way is to use Javascript.

We assume that the main-content have id="main".

You just need to add this code in ngOnInit of the child component:

element: HTMLElement;

constructor(
  .
  .
  @Inject(DOCUMENT) private document: Document,
) { }

ngOnInit() {
   this.element = this.document.getElementById('main');
   this.element.classList.add('your-custom-class');
}

And in the ngOnDestroy() remove this class:

ngOnDestroy(): void {
   this.element.classList.remove('your-custom-class');
}

---

Related Topics