Angular中不使用ViewEncapsulation.None的CSS应用及生效问题咨询

Angular默认使用ViewEncapsulation.Emulated（不配置encapsulation时的默认值），它会给组件内的所有样式自动添加专属属性选择器（比如[_nghost-abc123]），实现样式隔离，确保组件样式只作用于自身DOM结构内的元素。

而body是整个页面的根元素，不属于Home组件的DOM范围，所以组件CSS里的body选择器会因Angular添加的属性限定，无法匹配到真实的body标签，自然不会生效。只有开启ViewEncapsulation.None时，组件样式变为全局样式，不再有属性限定，才能作用到body。

根据需求分两种场景处理：

场景1：给整个应用的body设置背景色 #

直接把body的样式写到全局样式文件中（比如项目根目录下的src/styles.css或src/styles.scss），全局样式本来就作用于整个应用，无需在组件内处理：

/* src/styles.css */
body {
    background-color: #007bff;
}

场景2：仅让Home组件所在区域显示背景色 #

不要直接修改body，而是给Home组件的根元素设置样式。组件的根元素（即<app-home>标签）属于组件DOM范围，能被组件样式正常作用：

1. 修改home.component.css：

app-home {
    display: block;
    min-height: 100vh; /* 让组件占满整个视口高度 */
    background-color: #007bff;
}

2. 移除home.component.ts中的encapsulation: ViewEncapsulation.None配置，保持默认的样式隔离即可：

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

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {}

这样既实现了视觉上的背景效果，又能维持Angular的样式隔离机制，避免样式污染全局。

内容的提问来源于stack exchange，提问作者Skander Ben Achour