How to style child components from parent component s CSS file

Question

I ve got a parent component   lt parent gt  lt  parent gt   And I want to populate this group with child components   lt parent gt     lt child gt  lt  child gt     lt child gt  lt  child gt     lt child gt  lt  child gt   lt  parent gt   Parent template   lt div class  quot parent quot  gt     lt  -- Children goes here -- gt     lt ng-content gt  lt  ng-content gt   lt  div gt   Child template   lt div class  quot child quot  gt Test lt  div gt   Since parent and child are two separate 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

User · 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

User · 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         lt div gt         lt child class  first  gt First lt  child gt         lt child class  second  gt Second lt  child gt       lt  div gt      encapsulation  ViewEncapsulation None     export class ParentComponent      constructor

User · Answer

As the internet updates I ve come across a solution   First some caveats    Still don t do it  To clarify  I wouldn t plan on child components allowing you to style them  SOC  If you as the component designer want to allow this then all the more power to you  If your child doesn t live in the shadow dom then this won t work for you  If you have to support a browser that can t have a shadow dom then this also won t work for you    First  mark your child component s encapsulation as shadow so it renders in the actual shadow dom  Second  add the part attribute to the element you wish to allow the parent to style  In your parent s component stylesheet you can use the   part   method to access

User · 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

User · 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

User · 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    lt md-list gt       lt a              ngFor  let convo of conversations              routerLink   conversations   convo id   messages               rla  routerLinkActive              routerLinkActive  active  gt           lt app-conversation                  selected   rla isActive                   convo   convo  gt  lt  app-conversation gt       lt  a gt   lt  md-list gt

User · 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   lt div  attr style   styleobject  gt  Or if you have a specific style you can use something like   lt div  style background-color   colorvar  gt   More discussion related to this  https   github com angular angular issues 6511

User · 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    lt parent gt     lt child  foo   bar  gt  lt  child gt   lt  parent gt    Angular is deprecating all ways of affecting child styles from parents   https   angular io guide component-styles deprecated-deep--and-ng-deep

User · Answer

I have solved it outside Angular  I have defined a shared scss that I m importing to my children   shared scss   cell     color   333333    background   eee    font-size  13px    font-weight  600      child scss   import  styles scss    cell      extend  cell      My proposed approach is a way how to solve the problem the OP has asked about  As mentioned at multiple occasions    ng-deep   ng-host will get depreciated and disabling encapsulation is just too much of a code leakage  in my view

User · 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 combinators were deprecated  Angular team introduced a new combinator   ng-deep   still it is experimental 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        lt parent gt                                   blue            lt child gt  lt  child gt                        orange            lt child class  quot class1 quot  gt  lt  child gt         yellow            lt child class  quot class2 quot  gt  lt  child gt         pink        lt  parent gt                  Old way  You can use encapsulation mode and or piercing CSS combinators  gt  gt  gt    deep  and   shadow working example   http   plnkr co edit 1RBDGQ p preview styles                host   color  red          host  gt  gt  gt  parent          color blue               host  gt  gt  gt  child         color orange               host  gt  gt  gt  child class1          color yellow               host  gt  gt  gt  child class2         color pink                       template      Angular2                                  red    lt parent gt                                   blue        lt child gt  lt  child gt                        orange        lt child class  quot class1 quot  gt  lt  child gt         yellow        lt child class  quot class2 quot  gt  lt  child gt         pink    lt  parent gt

User · 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   lt span class  label-1  gt  lt  span gt      child component scss   host child-color-black        label-1           color  black            host child-color-blue        label-1           color  blue               parent component html   lt child class  child-color-black  gt  lt  child gt   lt child class  child-color-blue  gt  lt  child gt    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  lt child gt  host element

User · 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  gt  gt  gt  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  gt  gt  gt   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

User · Answer

Since  deep    gt  gt  gt   and   ng-deep are all deprecated  The best approach is to use the following in your child component styling  host-context  theme-light  h2     background-color   eef     This will look for the theme-light in any of the ancestors of your child component  See docs here  https   angular io guide component-styles host-context

User · Answer

let  parent  be the class-name of parent and  child  be the class-name of child  parent  child    css definition for child inside parent components     you can use this format to define CSS format to  child  component inside the  parent

User · Answer

For assigning an element s class in a child component you can simply use an  Input string in the child s component and use it as an expression inside the template  Here is an example of something we did to change the icon and button type in a shared Bootstrap loading button component  without affecting how it was already used throughout the codebase  app-loading-button component html  child   lt button class  quot btn   additionalClasses   quot  gt     lt  button gt   app-loading-button component ts  Input   additionalClasses  string   parent html  lt app-loading-button additionalClasses  quot fa fa-download btn-secondary quot  gt     lt  app-loading-button gt

User · Answer

You should NOT use   ng-deep  it is deprecated  In Angular  the proper way to change the style of children s component from the parent is to use encapsulation  read the warning below to understand the implications   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  Doing this will make all css rules you write for this component to be global  In order to limit the scope of your css to this component and his child only  add a css class to the top tag of your component and put your css  quot inside quot  this tag  template       lt div class  my-component  gt         lt child-component class  quot first quot  gt First lt  child gt       lt  div gt    Scss file   my-component        All your css goes in there in order not to be global

User · Answer

As of today  Angular 9   Angular uses a Shadow DOM to display the components as custom HTML elements  One elegant way to style those custom elements might be using custom CSS variables  Here is a generic example    x000D   x000D  class ChildElement extends HTMLElement   x000D    constructor     x000D      super    x000D       x000D      var shadow   this attachShadow  mode   open     x000D      var wrapper   document createElement  div    x000D      wrapper setAttribute  class    wrapper    x000D       x000D         Create some CSS to apply to the shadow dom x000D      var style   document createElement  style    x000D       x000D      style textContent     x000D       x000D           Here we define the default value for the variable --background-clr    x000D         host   x000D          --background-clr  green  x000D          x000D         x000D         wrapper   x000D          width  100px  x000D          height  100px  x000D          background-color  var --background-clr   x000D          border  1px solid red  x000D          x000D         x000D       x000D      shadow appendChild style   x000D      shadow appendChild wrapper   x000D      x000D    x000D   x000D     Define the new element x000D  customElements define  child-element   ChildElement   x000D     CSS CODE    x000D   x000D     This element is referred as  host from the point of view of the custom element  Commenting out this CSS will result in the background to be green  as defined in the custom element    x000D   x000D  child-element   x000D    --background-clr  yellow   x000D    x000D   lt div gt  x000D     lt child-element gt  lt  child-element gt  x000D   lt  div gt  x000D   x000D   x000D    As we can see from the above code  we create a custom element  just like Angular would do for us with every component  and then we override the variable responsible for the background color within the shadow root of the custom element  from the global scope   In an Angular app  this might be something like   parent component scss  child-element     --background-clr  yellow      child-element component scss   host     --background-clr  green      wrapper     width  100px    height  100px    background-color  var --background-clr     border  1px solid red

User · Answer

i also had this problem and didnt wanted to use deprecated solution  so i ended up with   in parrent    lt dynamic-table   ContainerCustomStyle  width  400px      gt    lt  dynamic-Table gt    child component   Input   ContainerCustomStyle  string    in child in html div    lt div class  container mat-elevation-z8    style   GetStyle ContainerCustomStyle    gt    and in code  constructor private sanitizer  DomSanitizer          GetStyle c        if  isNullOrUndefined c     return null        return  this sanitizer bypassSecurityTrustStyle c         works like expected and should not be deprecated

User · Answer

There are a few options to achieve this in Angular   1  You can use deep css selectors   host  gt  gt  gt   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         lt div gt         lt child class  first  gt First lt  child gt         lt child class  second  gt Second lt  child gt       lt  div gt      encapsulation  ViewEncapsulation None       export class ParentComponent       constructor

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

Examples related to css

Examples related to angular

Examples related to angular-components