css - 如何仅设置子组件的样式？

Question

我正在处理涉及一个父组件和多个子组件的代码。我正在尝试将其中一个子组件上的过滤器图标向下移动 5 个像素。问题是无论我在子组件中写什么CSS，都不会影响子组件。如果我将以下代码放在父组件中，它会作用于子组件，但不幸的是也会影响其他组件:

:host /deep/ svg-icon.filterIcon {
  height: 22px !important;
  padding-top: 5px !important;
}

如果我将相同的代码放入我想要设置样式的子项中，则什么也不会发生。当我使用以下代码时也没有发生任何事情:

svg-icon.filterIcon {
  height: 22px !important;
  padding-top: 5px !important;
}

如何只给这一个 child 设计样式？

Answer 1

尝试在您的子组件中使用ViewEncapsulation:

import {ViewEncapsulation} from '@angular/core'; //Import this

@Component({
   moduleId: id,
   selector: 'my-child',
   templateUrl: 'my-child.component.html',
   styles: [`
     .your_css_class {
        background: red;
      }
   `],
   encapsulation: ViewEncapsulation.None  // put this
 })

 class ChildComponent {
    @Input() some_data: string;
 }