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;
}

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

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;
 }

Answer 2

在父组件的CSS内部命名子组件，如下所示：

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

我仍然不了解如何直接设置儿童组件的样式，但我很高兴我发现了一些有用的东西。

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

2 个答案: