阻止一个组件从另一个组件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
})