44

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; }
Improve this question

5 Answers 5

Reset to default
94

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

If you don't mind, can you please explain your solution Although its working, but I don't know why it was not working before.
Styling applied directly to a component only applies to the component, it does not apply to other components, because of "view encapsulation", ie the view is encapsulated to the component. This answer solves the problem in question, but it effectively makes its styling global, and can cause problems in SPA designs, as it is functionally writing an exception to standard expectation.
2

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{ }
Improve this answer

Comments

1

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.

Improve this answer

1 Comment

Could you elaborate the answer rather than just giving the answer? See: stackoverflow.com/help/how-to-answer
1

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 }
Improve this answer

Comments

0

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'], })

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.