title: Style in one component is over riding style in another component in angular
body: <p>I'm having a X component with a card container. When I click on the card I'm taken to another component which has A,B,C components nested in a container. Component A also has a card container but with different css styling. When I click back and come to X component the card container's css is replaced with A component's CSS. </p>
  
  <p>I'm using Viewencapsulation.none in A component as I have to override some of the material CSS. My requirement is that when I come back to X component the CSS of A should not override it.</p>
  
  <p>This is the CSS in A component</p>
  
  <pre><code>    `.card{
       max-width: 270px !important;
       margin: auto;
       transition: all ease 0.3s;
       box-shadow: 0 8px 40px -12px rgba(0,0,0,0.3);
       background:'#7E7E7E'
       }`
  </code></pre>
  
  <p>This is the CSS in X component </p>
  
  <pre><code>    `  .card {
            display:block;
           /* text-align: center !important; */
           perspective: 150rem;
  -        moz-perspective: 150rem;
           position: relative;
           height: 30rem;
           /* padding: calc((100% - 2 * 6rem) / 5); */
           padding-left: 3vw;
           padding-right: 3vw;
          }`
  </code></pre>
  
  <p>Since there is max-width in A component my X component also takes up that and is making it look awkward and I can't remove that max-width from A because of my styling.</p>
  
  <p>Decorator in X component</p>
  
  <pre><code>   `@Component({
      selector: 'app-X',
      templateUrl: './X.component.html',
      styleUrls: ['./X.component.css'],
      encapsulation: ViewEncapsulation.None
      })
  </code></pre>
  
  <p>Without ViewEncapsulation.None it works as expected, but I need that encapsulation to be none to override this in material</p>
  
  <pre><code>        `  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
            border-color:#fff !important;
           }
  
          .mat-radio-button.mat-accent .mat-radio-inner-circle{
             color:rgb(66, 134, 244) !important;
           background-color:#fff !important
          }`
  </code></pre>