Varun Varun - 3 months ago 97
CSS Question

Angular 2 styling not applying to Child Component

I'm trying to apply styling to a child component tag, but i can't do that.

I have child component with anchor tag.

Even though i have styling for anchor tag in the parent component, its not applying. What's the solution for it?

Working code: http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview

<a href="https://www.google.com">Google</a>


In the parent component i'm using the child component and applying styling for this child component.

Html code:

<div class="container">
<div class="test">
<testapp></testapp>
</div>
</div>


Css code:

.container{
font-family:sans-serif;
font-size:18px;
border: 1px solid black;
}
.test{
width:50%;
background-color:#f0f5f5;
}

.container:hover .test{
background-color:#e6ffe6;
}
.container:hover .test:hover{
background-color:#ffffe6;
}
.container .test a {
color: red ;
}
.container .test a:hover {
color:green;
}

Answer

It's because by default components have view encapsulation (shadow dom). To disable this behavior, you can leverage the encapsulation attribute, as described below:

import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
  selector:'test-component',
  styleUrls: ['test.component.css'],
  templateUrl: './test.component.html',
  directives:[TestApp],
  encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{

}

See this plunkr: http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview.

Comments