如何在login组件中修改body、html及全局选择器*的样式？

Angular组件默认开启视图封装（View Encapsulation），组件内的样式仅作用于自身DOM元素，因此直接编写body、html、*这类全局选择器不会生效。以下是三种可行的解决方案：

1. 使用:host-context()伪类 #

通过:host-context()可以让组件样式作用于宿主元素的上下文（比如body），无需修改视图封装设置：

/* login.component.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* 作用于全局*选择器 */
:host-context(*) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* 作用于body */
:host-context(body) {
    background-color: red;
}

2. 关闭组件的视图封装 #

在组件元数据中设置encapsulation: ViewEncapsulation.None，让组件样式变为全局样式：

// login.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class LoginComponent {
    // 组件逻辑
}

注意：关闭封装后组件样式会全局生效，需避免与其他组件样式冲突，建议给样式添加专属前缀。

3. 结合全局样式文件与动态类 #

利用项目的全局样式文件（如styles.css）定义目标样式，再通过组件生命周期动态给body添加/移除类，仅在登录页面生效：

/* styles.css */
.login-page body {
    background-color: red;
}

.login-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

// login.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
    ngOnInit(): void {
        document.body.classList.add('login-page');
    }

    ngOnDestroy(): void {
        document.body.classList.remove('login-page');
    }
}

这种方式不会污染全局样式，仅在登录组件激活时应用目标样式。

内容的提问来源于stack exchange，提问作者bouns