如何在Angular中抵消ViewEncapsulation.None的样式影响？

这个问题我之前也碰到过，Angular的样式封装机制有时候确实容易让人懵，我来给你捋捋怎么解决～

首先得搞清楚为什么你在secondComponent里重写样式没生效：当firstComponent用ViewEncapsulation.None时，它的CSS样式会变成全局样式，直接作用到整个应用中所有匹配选择器的元素；而默认封装（ViewEncapsulation.Emulated）的secondComponent，它的组件内样式会被Angular自动加上属性选择器前缀（比如[_ngcontent-xxx]），所以你写的.my-class会被编译成.my-class[_ngcontent-xxx]。理论上这个带属性前缀的选择器优先级更高，但如果全局样式的选择器更具体（比如div.my-class），或者你写法有问题，就会出现覆盖不掉的情况。

下面是几个靠谱的解决方案，你可以根据自己的需求选：

1. 提高secondComponent内样式的优先级 #

最直接的方式是用:host伪类来限定样式作用域，同时提升选择器优先级：

/* secondComponent的组件样式文件 */
:host .my-class {
  /* 你的自定义样式 */
  color: blue;
  font-size: 16px;
}

:host会匹配secondComponent的宿主元素，编译后会变成[_nghost-xxx] .my-class，这个选择器的优先级比全局的.my-class更高，能确保你的自定义样式生效。

如果实在紧急，也可以用!important强制覆盖，但非常不推荐——它会破坏正常的样式优先级规则，后续维护会很麻烦：

.my-class {
  color: blue !important;
}

2. 避免全局样式污染（从根源解决） #

如果你不想让firstComponent的样式影响其他组件，即使它用了ViewEncapsulation.None，也可以用:host来限定样式只作用于自身：

/* firstComponent的组件样式文件 */
:host .my-class {
  /* 你的样式 */
  color: red;
}

这样firstComponent的.my-class样式只会作用于自己组件内的元素，不会污染全局，secondComponent里的.my-class就能正常使用自己的样式了。

3. 用CSS自定义属性（变量）实现样式复用与重写 #

你提到希望secondComponent使用该类的自定义属性值，那用CSS变量是最优雅的方式：
首先在firstComponent的全局样式里定义变量：

/* firstComponent的组件样式文件 */
.my-class {
  /* 定义基础自定义属性 */
  --text-color: red;
  --font-size: 14px;
  /* 使用变量 */
  color: var(--text-color);
  font-size: var(--font-size);
}

然后在secondComponent里重写这些变量即可：

/* secondComponent的组件样式文件 */
.my-class {
  /* 重写自定义属性 */
  --text-color: blue;
  --font-size: 16px;
}

CSS变量会遵循就近原则，secondComponent内的元素会优先使用组件内定义的变量值，完美实现你的需求～

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