Блокировать один компонент, получая CSS от другого компонента angular6

Question

У меня есть компонент с именем profile-data.component, который использует компонент Angular Material mat-tab-group, я использовал этот компонент Angular Material сначала tournament-list.component.

Теперь мой mat-tab-group внутри profile-data.component получаетcss из tournament-list.component есть ли способ заблокировать это?

Моя структура папок выглядит следующим образом.

app
  profile
    profile-data
      profile-data.component

   tournament
     tournament-list
       tournament-list.component

Это мой 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;
  }

И мой tournament-list.component.css

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

И я получаю белый цвет вместо синего

Answer 1

Использовать ViewEncapsulation - определение стилей в угловом формате с помощью ViewEncapsulation Если задано значение Native - это идеальный режим инкапсуляции, в котором Shadow DOM используется для выделения стилей только для этого конкретного компонента.

В вашем компонентном декораторе используйте это свойство следующим образом:

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

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