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












165















I've got a parent component:



<parent></parent>


And I want to populate this group with child components:



<parent>
<child></child>
<child></child>
<child></child>
</parent>


Parent template:



<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>


Child template:



<div class="child">Test</div>


Since parent and child are two seperate components, their styles are locked to their own scope.



In my parent component I tried doing:



.parent .child {
// Styles for child
}


But the .child styles are not getting applied to the child components.



I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:



// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]


But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.



So how do you style child components that are included into a parent component?










share|improve this question




















  • 1





    See also stackoverflow.com/questions/34542143/…

    – Günter Zöchbauer
    Nov 7 '16 at 8:58











  • See a completely paradigm-friendly, trick-free way in my answer.

    – Alexander Abakumov
    Sep 27 '18 at 15:36
















165















I've got a parent component:



<parent></parent>


And I want to populate this group with child components:



<parent>
<child></child>
<child></child>
<child></child>
</parent>


Parent template:



<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>


Child template:



<div class="child">Test</div>


Since parent and child are two seperate components, their styles are locked to their own scope.



In my parent component I tried doing:



.parent .child {
// Styles for child
}


But the .child styles are not getting applied to the child components.



I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:



// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]


But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.



So how do you style child components that are included into a parent component?










share|improve this question




















  • 1





    See also stackoverflow.com/questions/34542143/…

    – Günter Zöchbauer
    Nov 7 '16 at 8:58











  • See a completely paradigm-friendly, trick-free way in my answer.

    – Alexander Abakumov
    Sep 27 '18 at 15:36














165












165








165


33






I've got a parent component:



<parent></parent>


And I want to populate this group with child components:



<parent>
<child></child>
<child></child>
<child></child>
</parent>


Parent template:



<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>


Child template:



<div class="child">Test</div>


Since parent and child are two seperate components, their styles are locked to their own scope.



In my parent component I tried doing:



.parent .child {
// Styles for child
}


But the .child styles are not getting applied to the child components.



I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:



// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]


But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.



So how do you style child components that are included into a parent component?










share|improve this question
















I've got a parent component:



<parent></parent>


And I want to populate this group with child components:



<parent>
<child></child>
<child></child>
<child></child>
</parent>


Parent template:



<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>


Child template:



<div class="child">Test</div>


Since parent and child are two seperate components, their styles are locked to their own scope.



In my parent component I tried doing:



.parent .child {
// Styles for child
}


But the .child styles are not getting applied to the child components.



I tried using styleUrls to include the parent's stylesheet into child component to solve the scope issue:



// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]


But that didn't help, also tried the other way by fetching the child stylesheet into parent but that didn't help either.



So how do you style child components that are included into a parent component?







css angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Feb 11 at 8:48







Chrillewoodz

















asked Apr 10 '16 at 8:35









ChrillewoodzChrillewoodz

11.3k134797




11.3k134797








  • 1





    See also stackoverflow.com/questions/34542143/…

    – Günter Zöchbauer
    Nov 7 '16 at 8:58











  • See a completely paradigm-friendly, trick-free way in my answer.

    – Alexander Abakumov
    Sep 27 '18 at 15:36














  • 1





    See also stackoverflow.com/questions/34542143/…

    – Günter Zöchbauer
    Nov 7 '16 at 8:58











  • See a completely paradigm-friendly, trick-free way in my answer.

    – Alexander Abakumov
    Sep 27 '18 at 15:36








1




1





See also stackoverflow.com/questions/34542143/…

– Günter Zöchbauer
Nov 7 '16 at 8:58





See also stackoverflow.com/questions/34542143/…

– Günter Zöchbauer
Nov 7 '16 at 8:58













See a completely paradigm-friendly, trick-free way in my answer.

– Alexander Abakumov
Sep 27 '18 at 15:36





See a completely paradigm-friendly, trick-free way in my answer.

– Alexander Abakumov
Sep 27 '18 at 15:36












12 Answers
12






active

oldest

votes


















162














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.



Update - Newer Way



From Angular 4.3.0, all piercing css combinartors were deprecated. Angular team introduced a new combinator ::ng-deep (still it is at experimental level and not the full and final way) 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>
`





share|improve this answer


























  • Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

    – adam-beck
    Feb 13 '17 at 16:13






  • 2





    Piercing CSS combinators are deprecated in Chrome though

    – Robin-Hoodie
    Jun 29 '17 at 8:20






  • 14





    The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

    – Devon Sams
    Oct 5 '17 at 13:51






  • 3





    As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

    – Kostas Siabanis
    Feb 16 '18 at 14:49






  • 2





    Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

    – Devon Sams
    Feb 16 '18 at 16:29



















47














UPDATE 3:



::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?



Comment if you have any insight in this.



UPDATE 2:



Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.



UPDATE:



If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.



ORIGINAL:



After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling



Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.





(>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.





So simply doing:



:host >>> .child {}


In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.






share|improve this answer


























  • little more regarding ::ng-deep - hackernoon.com/…

    – neoswf
    Aug 25 '17 at 15:19











  • Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

    – Jed Richards
    Mar 1 '18 at 10:48











  • GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

    – spottedmahn
    May 14 '18 at 12:16



















15














Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).






share|improve this answer

































    14














    Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
    https://www.chromestatus.com/features/6750456638341120



    In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.


    You could pass a style object to your child and have it applied via:
    <div [attr.style]="styleobject">


    Or if you have a specific style you can use something like:
    <div [style.background-color]="colorvar">



    More discussion related to this:
    https://github.com/angular/angular/issues/6511






    share|improve this answer































      10














      If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.



      Plunker:
      https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview



      For example:



      import {Component, NgModule } from '@angular/core'
      import {BrowserModule} from '@angular/platform-browser'

      @Component({
      selector: 'my-app',
      template: `
      <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
      </div>
      `,
      styles: [`

      /deep/ child-component.target1 .child-box {
      color: red !important;
      border: 10px solid red !important;
      }

      /deep/ child-component.target2 .child-box {
      color: purple !important;
      border: 10px solid purple !important;
      }

      /deep/ child-component.target3 .child-box {
      color: orange !important;
      border: 10px solid orange !important;
      }

      /* this won't work because the target component is spelled incorrectly */
      /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important;
      border: 10px solid orange !important;
      }

      /* this will affect any component that has a class name called .child-box */
      /deep/ .child-box {
      color: blue !important;
      border: 10px solid blue !important;
      }


      `]
      })
      export class App {
      }

      @Component({
      selector: 'child-component',
      template: `
      <div class="child-box">
      Child: This is some text in a box
      </div>
      `,
      styles: [`
      .child-box {
      color: green;
      border: 1px solid green;
      }
      `]
      })
      export class ChildComponent {
      }


      @NgModule({
      imports: [ BrowserModule ],
      declarations: [ App, ChildComponent ],
      bootstrap: [ App ]
      })
      export class AppModule {}


      Hope this helps!



      codematrix






      share|improve this answer

































        8














        If you don't want to use ::ng-deep, you can do this which seems to be the proper way:



        import { ViewEncapsulation } from '@angular/core';

        @Component({
        ....
        encapsulation: ViewEncapsulation.None
        })


        And then, you will be able to modify the css form your component without a need from ::ng-deep



        .mat-sort-header-container {
        display:flex;
        justify-content:center;
        }


        WARNING: be careful as if your component has a lot of children, the css you write for this component might impact all children!






        share|improve this answer































          6














          There are a few options to achieve this in Angular:



          1) You can use deep css selectors



          :host >>> .childrens {
          color: red;
          }


          2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it



          For example:`



          import { Component, ViewEncapsulation } from '@angular/core';

          @Component({
          selector: 'parent',
          styles: [`
          .first {
          color:blue;
          }
          .second {
          color:red;
          }
          `],
          template: `
          <div>
          <child class="first">First</child>
          <child class="second">Second</child>
          </div>`,
          encapsulation: ViewEncapsulation.None,
          })
          export class ParentComponent {
          constructor() {

          }
          }





          share|improve this answer



















          • 1





            Actually it means that styles affect whole dom, not only child elements.

            – Kasper Ziemianek
            Oct 12 '18 at 11:01



















          4














          I find it a lot cleaner to pass an @INPUT variable if you have access to the child component code:



          The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture



          SCSS Way:



          .active {
          ::ng-deep md-list-item {
          background-color: #eee;
          }
          }


          Better way: - use selected variable:



          <md-list>
          <a
          *ngFor="let convo of conversations"
          routerLink="/conversations/{{convo.id}}/messages"
          #rla="routerLinkActive"
          routerLinkActive="active">
          <app-conversation
          [selected]="rla.isActive"
          [convo]="convo"></app-conversation>
          </a>
          </md-list>





          share|improve this answer



















          • 3





            This will not work with the third-party components that don't have such property, though. :(

            – Igor Soloydenko
            Jan 12 '18 at 0:35



















          2














          You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.



          Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.



          Technically, it could be done as follows:



          // child.component.html:
          <span class="label-1"></span>

          // child.component.scss:
          :host.child-color-black {
          .label-1 {
          color: black;
          }
          }

          :host.child-color-blue {
          .label-1 {
          color: blue ;
          }
          }

          // parent.component.html:
          <child class="child-color-black"></child>
          <child class="child-color-blue"></child>


          In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.






          share|improve this answer


























          • Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

            – Manohar Reddy Poreddy
            Dec 14 '18 at 10:57













          • @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

            – Alexander Abakumov
            Dec 14 '18 at 15:12











          • Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

            – Manohar Reddy Poreddy
            Dec 15 '18 at 5:45











          • @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

            – Alexander Abakumov
            Dec 17 '18 at 16:37






          • 1





            @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

            – Alexander Abakumov
            Dec 17 '18 at 17:13





















          1














          The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.



          <parent>
          <child [foo]="bar"></child>
          </parent>


          Angular is deprecating all ways of affecting child styles from parents.



          https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep






          share|improve this answer


























          • Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

            – Jed Richards
            Mar 1 '18 at 11:05











          • So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

            – Chrillewoodz
            Mar 1 '18 at 11:09



















          0














          I propose an example to make it more clear, since angular.io/guide/component-styles states:




          The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.




          On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:



          $button_ripple_red: #A41E34;
          $button_ripple_white_text: #FFF;


          Apply a rule to all components



          All the buttons having btn-red class will be styled.



          @import `./theme/sass/_colors`;

          // red background and white text
          :host /deep/ button.red-btn {
          color: $button_ripple_white_text;
          background: $button_ripple_red;
          }


          Apply a rule to a single component



          All the buttons having btn-red class on app-login component will be styled.



          @import `./theme/sass/_colors`;

          /deep/ app-login button.red-btn {
          color: $button_ripple_white_text;
          background: $button_ripple_red;
          }





          share|improve this answer































            0














            Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.



            Here is modified Denis Rybalka example:



            import { Component, ViewEncapsulation } from '@angular/core';

            @Component({
            selector: 'parent',
            styles: [`
            parent {
            .first {
            color:blue;
            }
            .second {
            color:red;
            }
            }
            `],
            template: `
            <div>
            <child class="first">First</child>
            <child class="second">Second</child>
            </div>`,
            encapsulation: ViewEncapsulation.None,
            })
            export class ParentComponent {
            constructor() { }
            }





            share|improve this answer























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36527605%2fhow-to-style-child-components-from-parent-components-css-file%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              12 Answers
              12






              active

              oldest

              votes








              12 Answers
              12






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              162














              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.



              Update - Newer Way



              From Angular 4.3.0, all piercing css combinartors were deprecated. Angular team introduced a new combinator ::ng-deep (still it is at experimental level and not the full and final way) 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>
              `





              share|improve this answer


























              • Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

                – adam-beck
                Feb 13 '17 at 16:13






              • 2





                Piercing CSS combinators are deprecated in Chrome though

                – Robin-Hoodie
                Jun 29 '17 at 8:20






              • 14





                The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

                – Devon Sams
                Oct 5 '17 at 13:51






              • 3





                As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

                – Kostas Siabanis
                Feb 16 '18 at 14:49






              • 2





                Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

                – Devon Sams
                Feb 16 '18 at 16:29
















              162














              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.



              Update - Newer Way



              From Angular 4.3.0, all piercing css combinartors were deprecated. Angular team introduced a new combinator ::ng-deep (still it is at experimental level and not the full and final way) 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>
              `





              share|improve this answer


























              • Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

                – adam-beck
                Feb 13 '17 at 16:13






              • 2





                Piercing CSS combinators are deprecated in Chrome though

                – Robin-Hoodie
                Jun 29 '17 at 8:20






              • 14





                The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

                – Devon Sams
                Oct 5 '17 at 13:51






              • 3





                As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

                – Kostas Siabanis
                Feb 16 '18 at 14:49






              • 2





                Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

                – Devon Sams
                Feb 16 '18 at 16:29














              162












              162








              162







              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.



              Update - Newer Way



              From Angular 4.3.0, all piercing css combinartors were deprecated. Angular team introduced a new combinator ::ng-deep (still it is at experimental level and not the full and final way) 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>
              `





              share|improve this answer















              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.



              Update - Newer Way



              From Angular 4.3.0, all piercing css combinartors were deprecated. Angular team introduced a new combinator ::ng-deep (still it is at experimental level and not the full and final way) 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>
              `






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Mar 7 '18 at 14:59









              hugo der hungrige

              7,65473968




              7,65473968










              answered Apr 10 '16 at 10:50









              micronyksmicronyks

              36.3k1173111




              36.3k1173111













              • Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

                – adam-beck
                Feb 13 '17 at 16:13






              • 2





                Piercing CSS combinators are deprecated in Chrome though

                – Robin-Hoodie
                Jun 29 '17 at 8:20






              • 14





                The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

                – Devon Sams
                Oct 5 '17 at 13:51






              • 3





                As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

                – Kostas Siabanis
                Feb 16 '18 at 14:49






              • 2





                Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

                – Devon Sams
                Feb 16 '18 at 16:29



















              • Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

                – adam-beck
                Feb 13 '17 at 16:13






              • 2





                Piercing CSS combinators are deprecated in Chrome though

                – Robin-Hoodie
                Jun 29 '17 at 8:20






              • 14





                The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

                – Devon Sams
                Oct 5 '17 at 13:51






              • 3





                As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

                – Kostas Siabanis
                Feb 16 '18 at 14:49






              • 2





                Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

                – Devon Sams
                Feb 16 '18 at 16:29

















              Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

              – adam-beck
              Feb 13 '17 at 16:13





              Are the piercing CSS combinators needed? Just .class2 in the plunker still gave the same results. Am I missing something?

              – adam-beck
              Feb 13 '17 at 16:13




              2




              2





              Piercing CSS combinators are deprecated in Chrome though

              – Robin-Hoodie
              Jun 29 '17 at 8:20





              Piercing CSS combinators are deprecated in Chrome though

              – Robin-Hoodie
              Jun 29 '17 at 8:20




              14




              14





              The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

              – Devon Sams
              Oct 5 '17 at 13:51





              The angular team plans to drop support of ::ng-deep as well. From their docs: "The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools." angular.io/guide/component-styles#deprecated-deep--and-ng-deep.

              – Devon Sams
              Oct 5 '17 at 13:51




              3




              3





              As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

              – Kostas Siabanis
              Feb 16 '18 at 14:49





              As long as this stays as an accepted answer, people will be mislead. ::ng-deep should not be used as @DevonSams points in the comment above.

              – Kostas Siabanis
              Feb 16 '18 at 14:49




              2




              2





              Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

              – Devon Sams
              Feb 16 '18 at 16:29





              Here's something I do sometimes. Instead of trying to reference the child from the parent, I do it in reverse. I reference the parent from the child using the SASS parent selector. In your child component: :host { parent-component & { /* your styles */ } }. Anytime the child component is nested in the parent, the style will apply. I don't know if this approach is kosher, but it works for now. sass-lang.com/documentation/…

              – Devon Sams
              Feb 16 '18 at 16:29













              47














              UPDATE 3:



              ::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?



              Comment if you have any insight in this.



              UPDATE 2:



              Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.



              UPDATE:



              If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.



              ORIGINAL:



              After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling



              Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.





              (>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.





              So simply doing:



              :host >>> .child {}


              In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.






              share|improve this answer


























              • little more regarding ::ng-deep - hackernoon.com/…

                – neoswf
                Aug 25 '17 at 15:19











              • Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

                – Jed Richards
                Mar 1 '18 at 10:48











              • GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

                – spottedmahn
                May 14 '18 at 12:16
















              47














              UPDATE 3:



              ::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?



              Comment if you have any insight in this.



              UPDATE 2:



              Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.



              UPDATE:



              If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.



              ORIGINAL:



              After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling



              Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.





              (>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.





              So simply doing:



              :host >>> .child {}


              In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.






              share|improve this answer


























              • little more regarding ::ng-deep - hackernoon.com/…

                – neoswf
                Aug 25 '17 at 15:19











              • Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

                – Jed Richards
                Mar 1 '18 at 10:48











              • GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

                – spottedmahn
                May 14 '18 at 12:16














              47












              47








              47







              UPDATE 3:



              ::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?



              Comment if you have any insight in this.



              UPDATE 2:



              Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.



              UPDATE:



              If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.



              ORIGINAL:



              After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling



              Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.





              (>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.





              So simply doing:



              :host >>> .child {}


              In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.






              share|improve this answer















              UPDATE 3:



              ::ng-deep is also deprecated which means you should not do this at all anymore. It is unclear how this affects things where you need to override styles in child components from a parent component. To me it seems odd if this gets removed completely because how would this affect things as libraries where you need to override styles in a library component?



              Comment if you have any insight in this.



              UPDATE 2:



              Since /deep/ and all other shadow piercing selectors are now deprecated. Angular dropped ::ng-deep which should be used instead for a broader compatibility.



              UPDATE:



              If using Angular-CLI you need to use /deep/ instead of >>> or else it will not work.



              ORIGINAL:



              After going to Angular2's Github page and doing a random search for "style" I found this question: Angular 2 - innerHTML styling



              Which said to use something that was added in 2.0.0-beta.10, the >>> and ::shadow selectors.





              (>>>) (and the equivalent/deep/) and ::shadow were added in 2.0.0-beta.10. They are similar to the shadow DOM CSS combinators (which are deprecated) and only work with encapsulation: ViewEncapsulation.Emulated which is the default in Angular2. They probably also work with ViewEncapsulation.None but are then only ignored because they are not necessary. These combinators are only an intermediate solution until more advanced features for cross-component styling is supported.





              So simply doing:



              :host >>> .child {}


              In parent's stylesheet file solved the issue. Please note, as stated in the quote above, this solution is only intermediate until more advanced cross-component styling is supported.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Apr 5 '18 at 11:24

























              answered Apr 10 '16 at 8:55









              ChrillewoodzChrillewoodz

              11.3k134797




              11.3k134797













              • little more regarding ::ng-deep - hackernoon.com/…

                – neoswf
                Aug 25 '17 at 15:19











              • Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

                – Jed Richards
                Mar 1 '18 at 10:48











              • GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

                – spottedmahn
                May 14 '18 at 12:16



















              • little more regarding ::ng-deep - hackernoon.com/…

                – neoswf
                Aug 25 '17 at 15:19











              • Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

                – Jed Richards
                Mar 1 '18 at 10:48











              • GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

                – spottedmahn
                May 14 '18 at 12:16

















              little more regarding ::ng-deep - hackernoon.com/…

              – neoswf
              Aug 25 '17 at 15:19





              little more regarding ::ng-deep - hackernoon.com/…

              – neoswf
              Aug 25 '17 at 15:19













              Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

              – Jed Richards
              Mar 1 '18 at 10:48





              Looks like they're going to be removing support for ::ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep

              – Jed Richards
              Mar 1 '18 at 10:48













              GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

              – spottedmahn
              May 14 '18 at 12:16





              GitHub Issue: Add support for Shadow DOM V1 appears to be the answer going forward

              – spottedmahn
              May 14 '18 at 12:16











              15














              Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).






              share|improve this answer






























                15














                Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).






                share|improve this answer




























                  15












                  15








                  15







                  Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).






                  share|improve this answer















                  Had same issue, so if you're using angular2-cli with scss/sass use '/deep/' instead of '>>>', last selector isn't supported yet (but works great with css).







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Mar 3 '17 at 7:18









                  Chrillewoodz

                  11.3k134797




                  11.3k134797










                  answered Oct 15 '16 at 12:03









                  SergiySevSergiySev

                  31037




                  31037























                      14














                      Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
                      https://www.chromestatus.com/features/6750456638341120



                      In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.


                      You could pass a style object to your child and have it applied via:
                      <div [attr.style]="styleobject">


                      Or if you have a specific style you can use something like:
                      <div [style.background-color]="colorvar">



                      More discussion related to this:
                      https://github.com/angular/angular/issues/6511






                      share|improve this answer




























                        14














                        Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
                        https://www.chromestatus.com/features/6750456638341120



                        In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.


                        You could pass a style object to your child and have it applied via:
                        <div [attr.style]="styleobject">


                        Or if you have a specific style you can use something like:
                        <div [style.background-color]="colorvar">



                        More discussion related to this:
                        https://github.com/angular/angular/issues/6511






                        share|improve this answer


























                          14












                          14








                          14







                          Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
                          https://www.chromestatus.com/features/6750456638341120



                          In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.


                          You could pass a style object to your child and have it applied via:
                          <div [attr.style]="styleobject">


                          Or if you have a specific style you can use something like:
                          <div [style.background-color]="colorvar">



                          More discussion related to this:
                          https://github.com/angular/angular/issues/6511






                          share|improve this answer













                          Sadly it appears that the /deep/ selector is deprecated (at least in Chrome)
                          https://www.chromestatus.com/features/6750456638341120



                          In short it appears there is (currently) no long term solution other than to somehow get your child component to style things dynamically.


                          You could pass a style object to your child and have it applied via:
                          <div [attr.style]="styleobject">


                          Or if you have a specific style you can use something like:
                          <div [style.background-color]="colorvar">



                          More discussion related to this:
                          https://github.com/angular/angular/issues/6511







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Apr 13 '17 at 19:59









                          Matthew B.Matthew B.

                          498512




                          498512























                              10














                              If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.



                              Plunker:
                              https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview



                              For example:



                              import {Component, NgModule } from '@angular/core'
                              import {BrowserModule} from '@angular/platform-browser'

                              @Component({
                              selector: 'my-app',
                              template: `
                              <div>
                              <h2>I'm the host parent</h2>
                              <child-component class="target1"></child-component><br/>
                              <child-component class="target2"></child-component><br/>
                              <child-component class="target3"></child-component><br/>
                              <child-component class="target4"></child-component><br/>
                              <child-component></child-component><br/>
                              </div>
                              `,
                              styles: [`

                              /deep/ child-component.target1 .child-box {
                              color: red !important;
                              border: 10px solid red !important;
                              }

                              /deep/ child-component.target2 .child-box {
                              color: purple !important;
                              border: 10px solid purple !important;
                              }

                              /deep/ child-component.target3 .child-box {
                              color: orange !important;
                              border: 10px solid orange !important;
                              }

                              /* this won't work because the target component is spelled incorrectly */
                              /deep/ xxxxchild-component.target4 .child-box {
                              color: orange !important;
                              border: 10px solid orange !important;
                              }

                              /* this will affect any component that has a class name called .child-box */
                              /deep/ .child-box {
                              color: blue !important;
                              border: 10px solid blue !important;
                              }


                              `]
                              })
                              export class App {
                              }

                              @Component({
                              selector: 'child-component',
                              template: `
                              <div class="child-box">
                              Child: This is some text in a box
                              </div>
                              `,
                              styles: [`
                              .child-box {
                              color: green;
                              border: 1px solid green;
                              }
                              `]
                              })
                              export class ChildComponent {
                              }


                              @NgModule({
                              imports: [ BrowserModule ],
                              declarations: [ App, ChildComponent ],
                              bootstrap: [ App ]
                              })
                              export class AppModule {}


                              Hope this helps!



                              codematrix






                              share|improve this answer






























                                10














                                If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.



                                Plunker:
                                https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview



                                For example:



                                import {Component, NgModule } from '@angular/core'
                                import {BrowserModule} from '@angular/platform-browser'

                                @Component({
                                selector: 'my-app',
                                template: `
                                <div>
                                <h2>I'm the host parent</h2>
                                <child-component class="target1"></child-component><br/>
                                <child-component class="target2"></child-component><br/>
                                <child-component class="target3"></child-component><br/>
                                <child-component class="target4"></child-component><br/>
                                <child-component></child-component><br/>
                                </div>
                                `,
                                styles: [`

                                /deep/ child-component.target1 .child-box {
                                color: red !important;
                                border: 10px solid red !important;
                                }

                                /deep/ child-component.target2 .child-box {
                                color: purple !important;
                                border: 10px solid purple !important;
                                }

                                /deep/ child-component.target3 .child-box {
                                color: orange !important;
                                border: 10px solid orange !important;
                                }

                                /* this won't work because the target component is spelled incorrectly */
                                /deep/ xxxxchild-component.target4 .child-box {
                                color: orange !important;
                                border: 10px solid orange !important;
                                }

                                /* this will affect any component that has a class name called .child-box */
                                /deep/ .child-box {
                                color: blue !important;
                                border: 10px solid blue !important;
                                }


                                `]
                                })
                                export class App {
                                }

                                @Component({
                                selector: 'child-component',
                                template: `
                                <div class="child-box">
                                Child: This is some text in a box
                                </div>
                                `,
                                styles: [`
                                .child-box {
                                color: green;
                                border: 1px solid green;
                                }
                                `]
                                })
                                export class ChildComponent {
                                }


                                @NgModule({
                                imports: [ BrowserModule ],
                                declarations: [ App, ChildComponent ],
                                bootstrap: [ App ]
                                })
                                export class AppModule {}


                                Hope this helps!



                                codematrix






                                share|improve this answer




























                                  10












                                  10








                                  10







                                  If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.



                                  Plunker:
                                  https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview



                                  For example:



                                  import {Component, NgModule } from '@angular/core'
                                  import {BrowserModule} from '@angular/platform-browser'

                                  @Component({
                                  selector: 'my-app',
                                  template: `
                                  <div>
                                  <h2>I'm the host parent</h2>
                                  <child-component class="target1"></child-component><br/>
                                  <child-component class="target2"></child-component><br/>
                                  <child-component class="target3"></child-component><br/>
                                  <child-component class="target4"></child-component><br/>
                                  <child-component></child-component><br/>
                                  </div>
                                  `,
                                  styles: [`

                                  /deep/ child-component.target1 .child-box {
                                  color: red !important;
                                  border: 10px solid red !important;
                                  }

                                  /deep/ child-component.target2 .child-box {
                                  color: purple !important;
                                  border: 10px solid purple !important;
                                  }

                                  /deep/ child-component.target3 .child-box {
                                  color: orange !important;
                                  border: 10px solid orange !important;
                                  }

                                  /* this won't work because the target component is spelled incorrectly */
                                  /deep/ xxxxchild-component.target4 .child-box {
                                  color: orange !important;
                                  border: 10px solid orange !important;
                                  }

                                  /* this will affect any component that has a class name called .child-box */
                                  /deep/ .child-box {
                                  color: blue !important;
                                  border: 10px solid blue !important;
                                  }


                                  `]
                                  })
                                  export class App {
                                  }

                                  @Component({
                                  selector: 'child-component',
                                  template: `
                                  <div class="child-box">
                                  Child: This is some text in a box
                                  </div>
                                  `,
                                  styles: [`
                                  .child-box {
                                  color: green;
                                  border: 1px solid green;
                                  }
                                  `]
                                  })
                                  export class ChildComponent {
                                  }


                                  @NgModule({
                                  imports: [ BrowserModule ],
                                  declarations: [ App, ChildComponent ],
                                  bootstrap: [ App ]
                                  })
                                  export class AppModule {}


                                  Hope this helps!



                                  codematrix






                                  share|improve this answer















                                  If you want to be more targeted to the actual child component than you should do the follow. This way, if other child components share the same class name, they won't be affected.



                                  Plunker:
                                  https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview



                                  For example:



                                  import {Component, NgModule } from '@angular/core'
                                  import {BrowserModule} from '@angular/platform-browser'

                                  @Component({
                                  selector: 'my-app',
                                  template: `
                                  <div>
                                  <h2>I'm the host parent</h2>
                                  <child-component class="target1"></child-component><br/>
                                  <child-component class="target2"></child-component><br/>
                                  <child-component class="target3"></child-component><br/>
                                  <child-component class="target4"></child-component><br/>
                                  <child-component></child-component><br/>
                                  </div>
                                  `,
                                  styles: [`

                                  /deep/ child-component.target1 .child-box {
                                  color: red !important;
                                  border: 10px solid red !important;
                                  }

                                  /deep/ child-component.target2 .child-box {
                                  color: purple !important;
                                  border: 10px solid purple !important;
                                  }

                                  /deep/ child-component.target3 .child-box {
                                  color: orange !important;
                                  border: 10px solid orange !important;
                                  }

                                  /* this won't work because the target component is spelled incorrectly */
                                  /deep/ xxxxchild-component.target4 .child-box {
                                  color: orange !important;
                                  border: 10px solid orange !important;
                                  }

                                  /* this will affect any component that has a class name called .child-box */
                                  /deep/ .child-box {
                                  color: blue !important;
                                  border: 10px solid blue !important;
                                  }


                                  `]
                                  })
                                  export class App {
                                  }

                                  @Component({
                                  selector: 'child-component',
                                  template: `
                                  <div class="child-box">
                                  Child: This is some text in a box
                                  </div>
                                  `,
                                  styles: [`
                                  .child-box {
                                  color: green;
                                  border: 1px solid green;
                                  }
                                  `]
                                  })
                                  export class ChildComponent {
                                  }


                                  @NgModule({
                                  imports: [ BrowserModule ],
                                  declarations: [ App, ChildComponent ],
                                  bootstrap: [ App ]
                                  })
                                  export class AppModule {}


                                  Hope this helps!



                                  codematrix







                                  share|improve this answer














                                  share|improve this answer



                                  share|improve this answer








                                  edited Apr 17 '17 at 18:32

























                                  answered Apr 17 '17 at 3:42









                                  code5code5

                                  2,0061918




                                  2,0061918























                                      8














                                      If you don't want to use ::ng-deep, you can do this which seems to be the proper way:



                                      import { ViewEncapsulation } from '@angular/core';

                                      @Component({
                                      ....
                                      encapsulation: ViewEncapsulation.None
                                      })


                                      And then, you will be able to modify the css form your component without a need from ::ng-deep



                                      .mat-sort-header-container {
                                      display:flex;
                                      justify-content:center;
                                      }


                                      WARNING: be careful as if your component has a lot of children, the css you write for this component might impact all children!






                                      share|improve this answer




























                                        8














                                        If you don't want to use ::ng-deep, you can do this which seems to be the proper way:



                                        import { ViewEncapsulation } from '@angular/core';

                                        @Component({
                                        ....
                                        encapsulation: ViewEncapsulation.None
                                        })


                                        And then, you will be able to modify the css form your component without a need from ::ng-deep



                                        .mat-sort-header-container {
                                        display:flex;
                                        justify-content:center;
                                        }


                                        WARNING: be careful as if your component has a lot of children, the css you write for this component might impact all children!






                                        share|improve this answer


























                                          8












                                          8








                                          8







                                          If you don't want to use ::ng-deep, you can do this which seems to be the proper way:



                                          import { ViewEncapsulation } from '@angular/core';

                                          @Component({
                                          ....
                                          encapsulation: ViewEncapsulation.None
                                          })


                                          And then, you will be able to modify the css form your component without a need from ::ng-deep



                                          .mat-sort-header-container {
                                          display:flex;
                                          justify-content:center;
                                          }


                                          WARNING: be careful as if your component has a lot of children, the css you write for this component might impact all children!






                                          share|improve this answer













                                          If you don't want to use ::ng-deep, you can do this which seems to be the proper way:



                                          import { ViewEncapsulation } from '@angular/core';

                                          @Component({
                                          ....
                                          encapsulation: ViewEncapsulation.None
                                          })


                                          And then, you will be able to modify the css form your component without a need from ::ng-deep



                                          .mat-sort-header-container {
                                          display:flex;
                                          justify-content:center;
                                          }


                                          WARNING: be careful as if your component has a lot of children, the css you write for this component might impact all children!







                                          share|improve this answer












                                          share|improve this answer



                                          share|improve this answer










                                          answered May 3 '18 at 16:37









                                          TonioTonio

                                          725825




                                          725825























                                              6














                                              There are a few options to achieve this in Angular:



                                              1) You can use deep css selectors



                                              :host >>> .childrens {
                                              color: red;
                                              }


                                              2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it



                                              For example:`



                                              import { Component, ViewEncapsulation } from '@angular/core';

                                              @Component({
                                              selector: 'parent',
                                              styles: [`
                                              .first {
                                              color:blue;
                                              }
                                              .second {
                                              color:red;
                                              }
                                              `],
                                              template: `
                                              <div>
                                              <child class="first">First</child>
                                              <child class="second">Second</child>
                                              </div>`,
                                              encapsulation: ViewEncapsulation.None,
                                              })
                                              export class ParentComponent {
                                              constructor() {

                                              }
                                              }





                                              share|improve this answer



















                                              • 1





                                                Actually it means that styles affect whole dom, not only child elements.

                                                – Kasper Ziemianek
                                                Oct 12 '18 at 11:01
















                                              6














                                              There are a few options to achieve this in Angular:



                                              1) You can use deep css selectors



                                              :host >>> .childrens {
                                              color: red;
                                              }


                                              2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it



                                              For example:`



                                              import { Component, ViewEncapsulation } from '@angular/core';

                                              @Component({
                                              selector: 'parent',
                                              styles: [`
                                              .first {
                                              color:blue;
                                              }
                                              .second {
                                              color:red;
                                              }
                                              `],
                                              template: `
                                              <div>
                                              <child class="first">First</child>
                                              <child class="second">Second</child>
                                              </div>`,
                                              encapsulation: ViewEncapsulation.None,
                                              })
                                              export class ParentComponent {
                                              constructor() {

                                              }
                                              }





                                              share|improve this answer



















                                              • 1





                                                Actually it means that styles affect whole dom, not only child elements.

                                                – Kasper Ziemianek
                                                Oct 12 '18 at 11:01














                                              6












                                              6








                                              6







                                              There are a few options to achieve this in Angular:



                                              1) You can use deep css selectors



                                              :host >>> .childrens {
                                              color: red;
                                              }


                                              2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it



                                              For example:`



                                              import { Component, ViewEncapsulation } from '@angular/core';

                                              @Component({
                                              selector: 'parent',
                                              styles: [`
                                              .first {
                                              color:blue;
                                              }
                                              .second {
                                              color:red;
                                              }
                                              `],
                                              template: `
                                              <div>
                                              <child class="first">First</child>
                                              <child class="second">Second</child>
                                              </div>`,
                                              encapsulation: ViewEncapsulation.None,
                                              })
                                              export class ParentComponent {
                                              constructor() {

                                              }
                                              }





                                              share|improve this answer













                                              There are a few options to achieve this in Angular:



                                              1) You can use deep css selectors



                                              :host >>> .childrens {
                                              color: red;
                                              }


                                              2) You can also change view encapsulation it's set to Emulated as a default but can be easily changed to Native which uses Shadow DOM native browser implementation, in your case you just need to disable it



                                              For example:`



                                              import { Component, ViewEncapsulation } from '@angular/core';

                                              @Component({
                                              selector: 'parent',
                                              styles: [`
                                              .first {
                                              color:blue;
                                              }
                                              .second {
                                              color:red;
                                              }
                                              `],
                                              template: `
                                              <div>
                                              <child class="first">First</child>
                                              <child class="second">Second</child>
                                              </div>`,
                                              encapsulation: ViewEncapsulation.None,
                                              })
                                              export class ParentComponent {
                                              constructor() {

                                              }
                                              }






                                              share|improve this answer












                                              share|improve this answer



                                              share|improve this answer










                                              answered Aug 12 '17 at 9:39









                                              Denis RybalkaDenis Rybalka

                                              6801817




                                              6801817








                                              • 1





                                                Actually it means that styles affect whole dom, not only child elements.

                                                – Kasper Ziemianek
                                                Oct 12 '18 at 11:01














                                              • 1





                                                Actually it means that styles affect whole dom, not only child elements.

                                                – Kasper Ziemianek
                                                Oct 12 '18 at 11:01








                                              1




                                              1





                                              Actually it means that styles affect whole dom, not only child elements.

                                              – Kasper Ziemianek
                                              Oct 12 '18 at 11:01





                                              Actually it means that styles affect whole dom, not only child elements.

                                              – Kasper Ziemianek
                                              Oct 12 '18 at 11:01











                                              4














                                              I find it a lot cleaner to pass an @INPUT variable if you have access to the child component code:



                                              The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture



                                              SCSS Way:



                                              .active {
                                              ::ng-deep md-list-item {
                                              background-color: #eee;
                                              }
                                              }


                                              Better way: - use selected variable:



                                              <md-list>
                                              <a
                                              *ngFor="let convo of conversations"
                                              routerLink="/conversations/{{convo.id}}/messages"
                                              #rla="routerLinkActive"
                                              routerLinkActive="active">
                                              <app-conversation
                                              [selected]="rla.isActive"
                                              [convo]="convo"></app-conversation>
                                              </a>
                                              </md-list>





                                              share|improve this answer



















                                              • 3





                                                This will not work with the third-party components that don't have such property, though. :(

                                                – Igor Soloydenko
                                                Jan 12 '18 at 0:35
















                                              4














                                              I find it a lot cleaner to pass an @INPUT variable if you have access to the child component code:



                                              The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture



                                              SCSS Way:



                                              .active {
                                              ::ng-deep md-list-item {
                                              background-color: #eee;
                                              }
                                              }


                                              Better way: - use selected variable:



                                              <md-list>
                                              <a
                                              *ngFor="let convo of conversations"
                                              routerLink="/conversations/{{convo.id}}/messages"
                                              #rla="routerLinkActive"
                                              routerLinkActive="active">
                                              <app-conversation
                                              [selected]="rla.isActive"
                                              [convo]="convo"></app-conversation>
                                              </a>
                                              </md-list>





                                              share|improve this answer



















                                              • 3





                                                This will not work with the third-party components that don't have such property, though. :(

                                                – Igor Soloydenko
                                                Jan 12 '18 at 0:35














                                              4












                                              4








                                              4







                                              I find it a lot cleaner to pass an @INPUT variable if you have access to the child component code:



                                              The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture



                                              SCSS Way:



                                              .active {
                                              ::ng-deep md-list-item {
                                              background-color: #eee;
                                              }
                                              }


                                              Better way: - use selected variable:



                                              <md-list>
                                              <a
                                              *ngFor="let convo of conversations"
                                              routerLink="/conversations/{{convo.id}}/messages"
                                              #rla="routerLinkActive"
                                              routerLinkActive="active">
                                              <app-conversation
                                              [selected]="rla.isActive"
                                              [convo]="convo"></app-conversation>
                                              </a>
                                              </md-list>





                                              share|improve this answer













                                              I find it a lot cleaner to pass an @INPUT variable if you have access to the child component code:



                                              The idea is that the parent tells the child what its state of appearance should be, and the child decides how to display the state. It's a nice architecture



                                              SCSS Way:



                                              .active {
                                              ::ng-deep md-list-item {
                                              background-color: #eee;
                                              }
                                              }


                                              Better way: - use selected variable:



                                              <md-list>
                                              <a
                                              *ngFor="let convo of conversations"
                                              routerLink="/conversations/{{convo.id}}/messages"
                                              #rla="routerLinkActive"
                                              routerLinkActive="active">
                                              <app-conversation
                                              [selected]="rla.isActive"
                                              [convo]="convo"></app-conversation>
                                              </a>
                                              </md-list>






                                              share|improve this answer












                                              share|improve this answer



                                              share|improve this answer










                                              answered Oct 5 '17 at 20:59









                                              robert kingrobert king

                                              9,42265089




                                              9,42265089








                                              • 3





                                                This will not work with the third-party components that don't have such property, though. :(

                                                – Igor Soloydenko
                                                Jan 12 '18 at 0:35














                                              • 3





                                                This will not work with the third-party components that don't have such property, though. :(

                                                – Igor Soloydenko
                                                Jan 12 '18 at 0:35








                                              3




                                              3





                                              This will not work with the third-party components that don't have such property, though. :(

                                              – Igor Soloydenko
                                              Jan 12 '18 at 0:35





                                              This will not work with the third-party components that don't have such property, though. :(

                                              – Igor Soloydenko
                                              Jan 12 '18 at 0:35











                                              2














                                              You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.



                                              Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.



                                              Technically, it could be done as follows:



                                              // child.component.html:
                                              <span class="label-1"></span>

                                              // child.component.scss:
                                              :host.child-color-black {
                                              .label-1 {
                                              color: black;
                                              }
                                              }

                                              :host.child-color-blue {
                                              .label-1 {
                                              color: blue ;
                                              }
                                              }

                                              // parent.component.html:
                                              <child class="child-color-black"></child>
                                              <child class="child-color-blue"></child>


                                              In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.






                                              share|improve this answer


























                                              • Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                                – Manohar Reddy Poreddy
                                                Dec 14 '18 at 10:57













                                              • @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                                – Alexander Abakumov
                                                Dec 14 '18 at 15:12











                                              • Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                                – Manohar Reddy Poreddy
                                                Dec 15 '18 at 5:45











                                              • @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                                – Alexander Abakumov
                                                Dec 17 '18 at 16:37






                                              • 1





                                                @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                                – Alexander Abakumov
                                                Dec 17 '18 at 17:13


















                                              2














                                              You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.



                                              Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.



                                              Technically, it could be done as follows:



                                              // child.component.html:
                                              <span class="label-1"></span>

                                              // child.component.scss:
                                              :host.child-color-black {
                                              .label-1 {
                                              color: black;
                                              }
                                              }

                                              :host.child-color-blue {
                                              .label-1 {
                                              color: blue ;
                                              }
                                              }

                                              // parent.component.html:
                                              <child class="child-color-black"></child>
                                              <child class="child-color-blue"></child>


                                              In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.






                                              share|improve this answer


























                                              • Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                                – Manohar Reddy Poreddy
                                                Dec 14 '18 at 10:57













                                              • @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                                – Alexander Abakumov
                                                Dec 14 '18 at 15:12











                                              • Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                                – Manohar Reddy Poreddy
                                                Dec 15 '18 at 5:45











                                              • @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                                – Alexander Abakumov
                                                Dec 17 '18 at 16:37






                                              • 1





                                                @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                                – Alexander Abakumov
                                                Dec 17 '18 at 17:13
















                                              2












                                              2








                                              2







                                              You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.



                                              Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.



                                              Technically, it could be done as follows:



                                              // child.component.html:
                                              <span class="label-1"></span>

                                              // child.component.scss:
                                              :host.child-color-black {
                                              .label-1 {
                                              color: black;
                                              }
                                              }

                                              :host.child-color-blue {
                                              .label-1 {
                                              color: blue ;
                                              }
                                              }

                                              // parent.component.html:
                                              <child class="child-color-black"></child>
                                              <child class="child-color-blue"></child>


                                              In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.






                                              share|improve this answer















                                              You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.



                                              Therefore, what you should do is to define a set of classes you could apply to the child host element and implement how the child responds to them.



                                              Technically, it could be done as follows:



                                              // child.component.html:
                                              <span class="label-1"></span>

                                              // child.component.scss:
                                              :host.child-color-black {
                                              .label-1 {
                                              color: black;
                                              }
                                              }

                                              :host.child-color-blue {
                                              .label-1 {
                                              color: blue ;
                                              }
                                              }

                                              // parent.component.html:
                                              <child class="child-color-black"></child>
                                              <child class="child-color-blue"></child>


                                              In other words, you use :host pseudo-selector provided by Angular + set of CSS classes to define possible child styles in child component itself. You then have the ability to trigger those styles from outside by applying pre-defined classes to the <child> host element.







                                              share|improve this answer














                                              share|improve this answer



                                              share|improve this answer








                                              edited Sep 27 '18 at 15:58

























                                              answered Sep 27 '18 at 15:33









                                              Alexander AbakumovAlexander Abakumov

                                              4,70344469




                                              4,70344469













                                              • Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                                – Manohar Reddy Poreddy
                                                Dec 14 '18 at 10:57













                                              • @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                                – Alexander Abakumov
                                                Dec 14 '18 at 15:12











                                              • Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                                – Manohar Reddy Poreddy
                                                Dec 15 '18 at 5:45











                                              • @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                                – Alexander Abakumov
                                                Dec 17 '18 at 16:37






                                              • 1





                                                @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                                – Alexander Abakumov
                                                Dec 17 '18 at 17:13





















                                              • Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                                – Manohar Reddy Poreddy
                                                Dec 14 '18 at 10:57













                                              • @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                                – Alexander Abakumov
                                                Dec 14 '18 at 15:12











                                              • Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                                – Manohar Reddy Poreddy
                                                Dec 15 '18 at 5:45











                                              • @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                                – Alexander Abakumov
                                                Dec 17 '18 at 16:37






                                              • 1





                                                @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                                – Alexander Abakumov
                                                Dec 17 '18 at 17:13



















                                              Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                              – Manohar Reddy Poreddy
                                              Dec 14 '18 at 10:57







                                              Looks like a good solution, is there a parent.component.scss file? if yes, care to give it?

                                              – Manohar Reddy Poreddy
                                              Dec 14 '18 at 10:57















                                              @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                              – Alexander Abakumov
                                              Dec 14 '18 at 15:12





                                              @ManoharReddyPoreddy There should be no styling in a parent.component.scss related to the styling of the child component. It's the sole purpose of this approach. Why do you need parent.component.scss?

                                              – Alexander Abakumov
                                              Dec 14 '18 at 15:12













                                              Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                              – Manohar Reddy Poreddy
                                              Dec 15 '18 at 5:45





                                              Not sure, just know a bit of css. Can you share a full solution on jsbin, or other. Your solution can be a future solution for everyone.

                                              – Manohar Reddy Poreddy
                                              Dec 15 '18 at 5:45













                                              @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                              – Alexander Abakumov
                                              Dec 17 '18 at 16:37





                                              @ManoharReddyPoreddy What do you mean by a full solution? What's not working for you when you're trying to paste 3 pieces of code above into your app?

                                              – Alexander Abakumov
                                              Dec 17 '18 at 16:37




                                              1




                                              1





                                              @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                              – Alexander Abakumov
                                              Dec 17 '18 at 17:13







                                              @ManoharReddyPoreddy I'd suggest you to try those pieces of code in practice first. Then, if you'd run into any issues, you'd have a specific question which I could answer or advice to look into a specific topic to get some understanding of how to fix your issue. I mentioned ViewEncapsulation just because its default value is what leads to the OP question. You don't have to assign a different ViewEncapsulation for the above code to work.

                                              – Alexander Abakumov
                                              Dec 17 '18 at 17:13













                                              1














                                              The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.



                                              <parent>
                                              <child [foo]="bar"></child>
                                              </parent>


                                              Angular is deprecating all ways of affecting child styles from parents.



                                              https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep






                                              share|improve this answer


























                                              • Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                                – Jed Richards
                                                Mar 1 '18 at 11:05











                                              • So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                                – Chrillewoodz
                                                Mar 1 '18 at 11:09
















                                              1














                                              The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.



                                              <parent>
                                              <child [foo]="bar"></child>
                                              </parent>


                                              Angular is deprecating all ways of affecting child styles from parents.



                                              https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep






                                              share|improve this answer


























                                              • Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                                – Jed Richards
                                                Mar 1 '18 at 11:05











                                              • So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                                – Chrillewoodz
                                                Mar 1 '18 at 11:09














                                              1












                                              1








                                              1







                                              The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.



                                              <parent>
                                              <child [foo]="bar"></child>
                                              </parent>


                                              Angular is deprecating all ways of affecting child styles from parents.



                                              https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep






                                              share|improve this answer















                                              The quick answer is you shouldn't be doing this, at all. It breaks component encapsulation and undermines the benefit you're getting from self-contained components. Consider passing a prop flag to the child component, it can then decide itself how to render differently or apply different CSS, if necessary.



                                              <parent>
                                              <child [foo]="bar"></child>
                                              </parent>


                                              Angular is deprecating all ways of affecting child styles from parents.



                                              https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep







                                              share|improve this answer














                                              share|improve this answer



                                              share|improve this answer








                                              edited Mar 1 '18 at 11:06

























                                              answered Mar 1 '18 at 10:50









                                              Jed RichardsJed Richards

                                              8,45011727




                                              8,45011727













                                              • Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                                – Jed Richards
                                                Mar 1 '18 at 11:05











                                              • So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                                – Chrillewoodz
                                                Mar 1 '18 at 11:09



















                                              • Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                                – Jed Richards
                                                Mar 1 '18 at 11:05











                                              • So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                                – Chrillewoodz
                                                Mar 1 '18 at 11:09

















                                              Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                              – Jed Richards
                                              Mar 1 '18 at 11:05





                                              Well they've said explicitly in their docs they're doing it eventually, which I guess means they will. I agree though, not happening anytime soon.

                                              – Jed Richards
                                              Mar 1 '18 at 11:05













                                              So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                              – Chrillewoodz
                                              Mar 1 '18 at 11:09





                                              So they will pretty much make their own Materials library useless. I've never been able to use a default theme in any library since each customer require their own design. Usually you just want the functionality of a component. I can't say I understand their overall logic behind this decision.

                                              – Chrillewoodz
                                              Mar 1 '18 at 11:09











                                              0














                                              I propose an example to make it more clear, since angular.io/guide/component-styles states:




                                              The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.




                                              On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:



                                              $button_ripple_red: #A41E34;
                                              $button_ripple_white_text: #FFF;


                                              Apply a rule to all components



                                              All the buttons having btn-red class will be styled.



                                              @import `./theme/sass/_colors`;

                                              // red background and white text
                                              :host /deep/ button.red-btn {
                                              color: $button_ripple_white_text;
                                              background: $button_ripple_red;
                                              }


                                              Apply a rule to a single component



                                              All the buttons having btn-red class on app-login component will be styled.



                                              @import `./theme/sass/_colors`;

                                              /deep/ app-login button.red-btn {
                                              color: $button_ripple_white_text;
                                              background: $button_ripple_red;
                                              }





                                              share|improve this answer




























                                                0














                                                I propose an example to make it more clear, since angular.io/guide/component-styles states:




                                                The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.




                                                On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:



                                                $button_ripple_red: #A41E34;
                                                $button_ripple_white_text: #FFF;


                                                Apply a rule to all components



                                                All the buttons having btn-red class will be styled.



                                                @import `./theme/sass/_colors`;

                                                // red background and white text
                                                :host /deep/ button.red-btn {
                                                color: $button_ripple_white_text;
                                                background: $button_ripple_red;
                                                }


                                                Apply a rule to a single component



                                                All the buttons having btn-red class on app-login component will be styled.



                                                @import `./theme/sass/_colors`;

                                                /deep/ app-login button.red-btn {
                                                color: $button_ripple_white_text;
                                                background: $button_ripple_red;
                                                }





                                                share|improve this answer


























                                                  0












                                                  0








                                                  0







                                                  I propose an example to make it more clear, since angular.io/guide/component-styles states:




                                                  The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.




                                                  On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:



                                                  $button_ripple_red: #A41E34;
                                                  $button_ripple_white_text: #FFF;


                                                  Apply a rule to all components



                                                  All the buttons having btn-red class will be styled.



                                                  @import `./theme/sass/_colors`;

                                                  // red background and white text
                                                  :host /deep/ button.red-btn {
                                                  color: $button_ripple_white_text;
                                                  background: $button_ripple_red;
                                                  }


                                                  Apply a rule to a single component



                                                  All the buttons having btn-red class on app-login component will be styled.



                                                  @import `./theme/sass/_colors`;

                                                  /deep/ app-login button.red-btn {
                                                  color: $button_ripple_white_text;
                                                  background: $button_ripple_red;
                                                  }





                                                  share|improve this answer













                                                  I propose an example to make it more clear, since angular.io/guide/component-styles states:




                                                  The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.




                                                  On app.component.scss, import your *.scss if needed. _colors.scss has some common color values:



                                                  $button_ripple_red: #A41E34;
                                                  $button_ripple_white_text: #FFF;


                                                  Apply a rule to all components



                                                  All the buttons having btn-red class will be styled.



                                                  @import `./theme/sass/_colors`;

                                                  // red background and white text
                                                  :host /deep/ button.red-btn {
                                                  color: $button_ripple_white_text;
                                                  background: $button_ripple_red;
                                                  }


                                                  Apply a rule to a single component



                                                  All the buttons having btn-red class on app-login component will be styled.



                                                  @import `./theme/sass/_colors`;

                                                  /deep/ app-login button.red-btn {
                                                  color: $button_ripple_white_text;
                                                  background: $button_ripple_red;
                                                  }






                                                  share|improve this answer












                                                  share|improve this answer



                                                  share|improve this answer










                                                  answered Sep 8 '17 at 11:33









                                                  AndreaM16AndreaM16

                                                  2,04721749




                                                  2,04721749























                                                      0














                                                      Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.



                                                      Here is modified Denis Rybalka example:



                                                      import { Component, ViewEncapsulation } from '@angular/core';

                                                      @Component({
                                                      selector: 'parent',
                                                      styles: [`
                                                      parent {
                                                      .first {
                                                      color:blue;
                                                      }
                                                      .second {
                                                      color:red;
                                                      }
                                                      }
                                                      `],
                                                      template: `
                                                      <div>
                                                      <child class="first">First</child>
                                                      <child class="second">Second</child>
                                                      </div>`,
                                                      encapsulation: ViewEncapsulation.None,
                                                      })
                                                      export class ParentComponent {
                                                      constructor() { }
                                                      }





                                                      share|improve this answer




























                                                        0














                                                        Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.



                                                        Here is modified Denis Rybalka example:



                                                        import { Component, ViewEncapsulation } from '@angular/core';

                                                        @Component({
                                                        selector: 'parent',
                                                        styles: [`
                                                        parent {
                                                        .first {
                                                        color:blue;
                                                        }
                                                        .second {
                                                        color:red;
                                                        }
                                                        }
                                                        `],
                                                        template: `
                                                        <div>
                                                        <child class="first">First</child>
                                                        <child class="second">Second</child>
                                                        </div>`,
                                                        encapsulation: ViewEncapsulation.None,
                                                        })
                                                        export class ParentComponent {
                                                        constructor() { }
                                                        }





                                                        share|improve this answer


























                                                          0












                                                          0








                                                          0







                                                          Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.



                                                          Here is modified Denis Rybalka example:



                                                          import { Component, ViewEncapsulation } from '@angular/core';

                                                          @Component({
                                                          selector: 'parent',
                                                          styles: [`
                                                          parent {
                                                          .first {
                                                          color:blue;
                                                          }
                                                          .second {
                                                          color:red;
                                                          }
                                                          }
                                                          `],
                                                          template: `
                                                          <div>
                                                          <child class="first">First</child>
                                                          <child class="second">Second</child>
                                                          </div>`,
                                                          encapsulation: ViewEncapsulation.None,
                                                          })
                                                          export class ParentComponent {
                                                          constructor() { }
                                                          }





                                                          share|improve this answer













                                                          Actually there is one more option. Which is rather safe. You can use ViewEncapsulation.None BUT put all your component styles into its tag (aka selector). But anyway always prefer some global style plus encapsulated styles.



                                                          Here is modified Denis Rybalka example:



                                                          import { Component, ViewEncapsulation } from '@angular/core';

                                                          @Component({
                                                          selector: 'parent',
                                                          styles: [`
                                                          parent {
                                                          .first {
                                                          color:blue;
                                                          }
                                                          .second {
                                                          color:red;
                                                          }
                                                          }
                                                          `],
                                                          template: `
                                                          <div>
                                                          <child class="first">First</child>
                                                          <child class="second">Second</child>
                                                          </div>`,
                                                          encapsulation: ViewEncapsulation.None,
                                                          })
                                                          export class ParentComponent {
                                                          constructor() { }
                                                          }






                                                          share|improve this answer












                                                          share|improve this answer



                                                          share|improve this answer










                                                          answered Jan 31 at 13:19









                                                          ilius33ilius33

                                                          913




                                                          913






























                                                              draft saved

                                                              draft discarded




















































                                                              Thanks for contributing an answer to Stack Overflow!


                                                              • Please be sure to answer the question. Provide details and share your research!

                                                              But avoid



                                                              • Asking for help, clarification, or responding to other answers.

                                                              • Making statements based on opinion; back them up with references or personal experience.


                                                              To learn more, see our tips on writing great answers.




                                                              draft saved


                                                              draft discarded














                                                              StackExchange.ready(
                                                              function () {
                                                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36527605%2fhow-to-style-child-components-from-parent-components-css-file%23new-answer', 'question_page');
                                                              }
                                                              );

                                                              Post as a guest















                                                              Required, but never shown





















































                                                              Required, but never shown














                                                              Required, but never shown












                                                              Required, but never shown







                                                              Required, but never shown

































                                                              Required, but never shown














                                                              Required, but never shown












                                                              Required, but never shown







                                                              Required, but never shown







                                                              Popular posts from this blog

                                                              Guess what letter conforming each word

                                                              Port of Spain

                                                              Run scheduled task as local user group (not BUILTIN)