从父组件样式化子组件模板 css angular

Question

如何使用 ::ng-deep 或其他方式从父组件强制 CSS 子组件？

我有放置子组件的父组件：

....parent.component...
<app-likes></app-likes>
.....parent.component......

里面没有喜欢的组件有他在关注HTML:

<div class="mainDiv">
<div class="secondDiv"><i class="far fa-heart fa-3x"></i></div></div>

现在我想将 fa-heart class 的颜色从父级 parent.component.css 设置为白色。

我该怎么做？

Answer 1

可以这样做，在父组件的css中：

parent.component.css:

:host ::ng-deep .fa-heart {
  color: red;
}

or

:host ::ng-deep app-likes .fa-heart {
  color: red;
}

Answer 2

您可以在 parent 组件中设置 ViewEncapsulation 选项来移除阴影 DOM。这实质上允许 child 组件使用来自 parent 组件的选择器定义。

尝试以下方法

Parent分量

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None        // <-- no shadow DOM
})
export class AppComponent  {
}

Parent CSS

.fa-heart {
  color: white;
}

工作示例：Stackblitz

Answer 3

好吧，我会反对上面的人，建议你不要这样做。

如果您将组件视为应用程序中的独立构建块，您会认为这是一个优势，它在您使用它的每个地方看起来都一样。使用 ::ng-deep 覆盖此行为会给您在大型应用程序中带来麻烦。

Angular 提倡使用@Inputs 作为将数据传递到组件的接口。我的建议是使用@Input 来修改视图。或者，如果在更大的上下文中，您可以使用依赖注入来提供一个标记，为组件的所有子项指定一个主题。

<app-likes theme="white"></app-likes>

@Component({selector: 'app-likes'})
class AppLikesComponent {
  @Input() theme: string;

  @HostBinging("class") get themeBinding() {
     return 'theme--' + this.theme;
  }
}

从父组件样式化子组件模板 css angular

Styling child components template from parent component css angular

css

parent-child

angular

ng-deep