Ionic Angular：如何在页面作用域中访问body选择器？

组件样式默认启用了视图封装（View Encaps的一天短暂 Ball Simple crafts entirely到夜间任务 failing经典紧密，导致页面SCSS里的全局选择器（如body）无法穿透到组件外部，因此无法通过body.dark匹配来修改组件内元素的样式。以下是两种可行方案：

方案1：使用:host-context()伪类（推荐） #

:host-context()是Angular提供的伪类，专门用于匹配宿主组件的祖先元素，既能实现根据外部body.dark类修改组件内样式的需求，又能保证样式仅作用于当前组件，不会污染全局。

修改你的page.scss：

:host-context(body.dark) .whatever-class {
  color: yellow;
}

当body带有dark类时，当前组件内的.whatever-class元素会自动应用黄色文字样式，完全符合你的需求。

方案2：关闭组件的视图封装（不推荐） #

若不想使用伪类，可关闭当前组件的视图封装，让组件样式变为全局样式，但需注意给类名添加唯一前缀，避免样式冲突。

修改page.component.ts：

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

@Component({
  selector: 'page',
  templateUrl: './page.html',
  styleUrls: ['./page.scss'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})

page.scss可保持原写法，但这种方式会让组件内所有样式全局生效，风险较高，非必要不建议使用。

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