根据正文标签的类别/属性在组件中应用不同的样式

Question

我试图根据body标签在页面上的类来更改组件中文本的颜色，但是由于封装（我认为），因此无法使用-

body.pink p
{
  color: pink;
}

body.blue p
{
  color: blue;
}

SO上有数十篇帖子，询问如何从组件内部更改身体的样式，但我完全相反。

编辑：为了清楚起见，我只希望CSS影响我的组件，它们只需要在body更改时进行更改。

Answer 1

以下组件CSS语法似乎可以正常工作：

body.pink :host p {
  color: pink;
}

body.blue :host p {
  color: blue;
}

有关演示，请参见this stackblitz。