阻止一個組件從另一個組件angular6獲取CSS

Question

我有一個名為profile-data.component的組件，它使用Angular Material mat-tab-group組件，我首先在tournament-list.component使用了此Angular Material組件。

現在我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在Angular中為樣式設置樣式-設置為Native時，這是一種理想的封裝模式，它使用Shadow DOM將樣式僅作用於該特定組件。

在組件裝飾器中，按如下所示使用此屬性：

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

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