CSS 中的 Angular 组件样式

Question

我有一个用于项目列表的父组件 HTML 和 CSS 文件。

HTML：

<div class="notifications-popup popup" *ngIf="showingNotifications" [style.top]="notificationCoords.top + 'px'" [style.left]="notificationCoords.left + 'px'">
  <ul class="notification-list">
    <app-dropdown-notification *ngFor="let data of notifications" [Notifications]="data"></app-dropdown-notification>
  </ul>
</div>

CSS：

@import '../../../assets/styles/utils.scss';
@import '../../../assets/styles/layouts.scss';

app-dropdown-notification{
  border-bottom: 1px solid $colorLightGray;
}

app-dropdown-notification:last-child{
  border-bottom: none;
}

还有一个构建项目的子组件：

<span class="container">
<div *ngIf="Notifications.type.video" class= "video component">
    <app-profile-icon class="sent_from" [src]="Notifications.image" size="45px" [color]="Notifications.color"></app-profile-icon>
    <div class= "video">
        <div class="profileName">{{Notifications.name}}</div>
        <div class= "text">{{Notifications.text}}</div>
    </div>
</div>
<div *ngIf="Notifications.type.post" class= "post component">
    <app-profile-icon class="sent_from" [src]="Notifications.image" size="45px" [color]="Notifications.color"></app-profile-icon>
    <div class= "video">
        <div class="profileName">{{Notifications.name}}</div>
        <div class= "text">{{Notifications.text}}</div>
    </div>
</div>
</span>

子组件的 CSS 没有接收在父组件中设置的样式，尽管此方法在其他组件之间有效。 TS 文件在两个组件上的设置相同。任何想法为什么样式没有通过？

Answer 1

在父组件中设置encapsulation，如下所示：

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
 ...
 encapsulation: ViewEncapsulation.None
})

ViewEncapsulation 类型

1-Emulated（默认） [值为 0]：没有影子 DOM，但通过向所有选择器添加新的宿主元素属性来提供样式封装。

2-None [值为 1]：没有影子 DOM。

3-ShadowDom [值为2]：使用Shadow DOM进行样式封装。