如何通过组件SCSS修改Ionic登录页面背景色？

为啥组件SCSS里的样式不生效？ #

1. 样式隔离限制：Ionic基于Angular，组件SCSS默认只作用于自己模板内的元素。.ion-page是Ionic自动生成的页面容器，不在你的登录组件HTML结构里，所以组件内的样式无法穿透到它。
2. 优先级不足：就算加了!important，Ionic核心样式的选择器优先级可能比你的更高，照样会覆盖自定义样式。

靠谱的解决方法 #

方法1：用:host-context()穿透样式 #

直接在登录组件的SCSS里写这段代码，就能让样式作用到包裹组件的.ion-page上：

:host-context(.ion-page) {
  background-color: red !important;
}

这个选择器专门用来突破组件样式隔离，匹配包含当前组件的父级.ion-page元素。

方法2：给页面加自定义类，精准定位 #

1. 先在登录组件的.ts文件里给页面添加一个自定义类，比如login-page：

// login.page.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
  host: {
    class: 'login-page'
  }
})
export class LoginPage {}

2. 然后在组件SCSS里用组合选择器，拉满优先级：

.login-page.ion-page {
  background-color: red !important;
}

方法3：修改全局样式（应急用，不推荐） #

要是不想折腾组件内的样式，也可以在项目根目录的global.scss里添加样式：

.login-page.ion-page {
  background-color: red;
}

但这种方式会影响所有带login-page类的页面，灵活性差，尽量少用。

关于找不到本地core.scss的说明 #

Chrome里看到的core.scss是Ionic编译后的核心样式文件，本地源码里根本没有这个文件——它是框架内置的，就算找到修改了，下次框架更新也会被覆盖，所以别费劲找了，用上面组件内的方法更稳妥。

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