如何仅设置子组件的样式？答案

【问题标题】：How to style child component only?如何仅设置子组件的样式？
【发布时间】：2018-04-05 15:54:28
【问题描述】：

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

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

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

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

如何只为这个孩子设计样式？

【问题讨论】：

标签： css angular

【解决方案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;
 }

【讨论】：

我尝试了你的建议。不幸的是，什么都没有改变。
您是否尝试过在浏览器中进行硬刷新？你能提供一个plunker吗？
硬刷新不起作用。我在下面找到了答案。

【解决方案2】：

在父组件的 CSS 中命名子组件是可行的，如下：

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

我仍然不明白如何直接设置子组件的样式，但我很高兴我找到了一些可行的方法。

【讨论】：