CODEWITHSUNDEEP
cssangular
Silencer
Silencer

Reputation: 1618

Child style applying to parent component in Angular 2?

I'm using Bootstrap css as a global style, and then modify it in each component if I need to, in index.htm I have:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

and then in the child I add the style

.nav li a {
  padding: 5px 10px;
}

which also overrides the value the parent receives from bootstrap for nav li a, is this considered ok? Maybe I don't really understand the Shadow DOM...

Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview

(But you have to launch it on you pc, because I'm not sure how to make "@import '/styles/UIComponent.css';" in customer.component.css work in plunker, this way it imports the css file in header and makes it global. If you change the line to "@import '../styles/UIComponent.css';" (the two dots added) it won't import the whole css, and the emulator will translate it as needed.)

Edit: It's a bug in current Angular2 beta: https://github.com/angular/angular/issues/6449

Upvotes: 3

Views: 10619

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

This should do what you want

:host .nav li a {
  padding: 5px 10px;
}

This way you are limiting the scope of your styles to your child component.
With ViewEncapsulation.None this doesn't work of course because this is about style encapsulation and None disables exactly this.

Upvotes: 2

Related Questions