CODEWITHSUNDEEP
cssangular
Varun
Varun

Reputation: 3735

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, it's 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;
}

Upvotes: 43

Views: 32475

Answers (5)

Odilbek Utamuratov
Odilbek Utamuratov

Reputation: 341

I have solved the issues like this by covering the styles which do not work with ::ng-deep{} or :host::ng-deep{} according to the case:

::ng-deep{
   // your styles
}

Or

:host ::ng-deep {
    // your styles
}

Upvotes: 1

Rohit Soni
Rohit Soni

Reputation: 57

Just add the parent component style into child component style url array, and make sure you give the correct path of the parent css url.

see the code below for your reference.

// in the child component @component:

 @component({
 styleUrls: ['./../parent.component.css', './child.component.css'],
})

Upvotes: 0

devMe
devMe

Reputation: 29

EDITED: This should solve:

In the css of child class write below code

:host.parentclass childclass{

}

The parentclass is immediate parent of child. childclass is the class applied to child component.

Upvotes: 1

DeborahK
DeborahK

Reputation: 60518

When using the styleUrls property, the styles are local to the one component, not to its children. So I made two changes: 1) Moved the styleUrls to the testapp component. 2) Moved the div to the testapp component.

import {Component} from '@angular/core';
@Component({
 selector:'testapp',
 styleUrls: ['./test.component.css'],
 template: `
 <div class="test">
  <a href="https://www.google.com">Google</a>
 </div>

 `

})
export class TestApp{

}

Upvotes: 2

Thierry Templier
Thierry Templier

Reputation: 202138

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.

Upvotes: 94

Related Questions