title: Angular 7 CSS not working while using reusable component
body: <p><em>I am fairly new to Angular and came from React.js background.</em></p>
  
  <p>I have made a simple grid component like below:</p>
  
  <p><code>grid.component.js</code>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-grid',
    template: `
      &lt;div [ngStyle]="styles()" [ngClass]="passClass"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
    `,
    styles: [`
      div {
        display: flex;
      }
    `]
  })
  export class GridComponent implements OnInit {
    @Input() direction: string;
    @Input() justify: string;
    @Input() align: string;
    @Input() width: string;
    @Input() passClass: string;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    styles() {
      return {
        'flex-direction': this.direction || 'row',
        'justify-content': this.justify || 'flex-start',
        'align-items': this.align || 'flex-start',
        ...(this.width &amp;&amp; { width: this.width })
      };
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I want to use it in other components like below:
  <code>aboutus.component.html</code>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;app-grid passClass="about-us page-container"&gt;
    &lt;app-grid direction="column" passClass="left"&gt;
      &lt;div class="title blue bold"&gt;
        An open community For Everyone
      &lt;/div&gt;
      &lt;div class="large-desc grey"&gt;
        This conference is brought to you by
        the Go Language Community in
        India together with the Emerging
        Technology Trust (ETT). ETT is a non-
        profit organization, established to
        organize and conduct technology
        conferences in India. It’s current
        portfolio includes
      &lt;/div&gt;
    &lt;/app-grid&gt;
  &lt;/app-grid&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>aboutus.component.sass</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.about-us
    position: relative
    .left
      width: 50%
      &amp;:after
        bottom: 0
        right: 0
        z-index: 0
        margin-right: -5vw
        position: absolute
        content: url(../../assets/images/footer.svg)</code></pre>
  </div>
  </div>
  </p>
  
  <p>But, what happens is the CSS attached with the second component will not work.</p>
  
  <p>I know a little bit about CSS isolation but could not understand if it affects here.</p>
  
  <p>P.S.: Please feel free to provide feedback to things outside of scope this question as well.</p>