Block one component getting CSS from another component angular6

Question

I have a component named profile-data.component that uses Angular Material mat-tab-group component, i used this Angular Material component in tournament-list.component first.

Now my mat-tab-group inside profile-data.component is getting the css from the tournament-list.component is there any way to block this?

My folder structure looks like this.

app
  profile
    profile-data
      profile-data.component

   tournament
     tournament-list
       tournament-list.component

This is my profile-data.component.css

.acc-settings{
   border-radius: 25px;
   display:inline-block;
   font-size: 30px;
   background-color: blue;
   color:white;
   padding-left: 10px;
   padding-right: 10px;
 }
 .line {
   width: 100%;
   height: 0;
   border: 1px solid blue;
   display:inline-block;
  }
  .mat-tab-body-content{
    color: blue;
  }

And my tournament-list.component.css

.mat-tab-body-content{
  color:white;
  text-align: center;
}

And I am getting the color white instead of the blue

Answer 1

Use ViewEncapsulation - Scoping Your Styles in Angular With ViewEncapsulation When set to Native - This is the encapsulation mode that would be ideal and it uses the Shadow DOM to scope styles only to that specific component.

In your component decorator use this property as follows:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.Native
})