angular - angular2 中 的自定义样式不起作用？

Question

我正在尝试设计 <ng-content>使用内联 css 但样式似乎不适用于 ng-content，我必须为样式做其他事情吗？

<ng-content class="red"></ng-content> <p class="red">hello</p>

这里 class red 在 p 上工作但不在

Working Example

Answer 1

::content被忽略。

这关门了

您可以使用 ::content选择器

styles: ['.red {color:red} :host >>> upper {color:green}']

或

styles: ['.red {color:red} :host >>> * {color:green}']

And if there are fellow LESS users, seems that LESS compiler dislikes >>> syntax, so you need to add an alias for that, eg. @deep: ~">>>"; and then use that like @{deep} { /* your deep styles here */ }

另请参阅此讨论 https://github.com/angular/angular/issues/7400#issuecomment-246922468

<罢工>您可以使用 ::content选择器

styles: ['.red {color:red} ::content >>> upper {color:green}']

或

styles: ['.red {color:red} ::content >>> * {color:green}']

<罢工>

根据网络组件规范 ::content应该足够了 >>>不应该是必需的，但没有它就不会应用样式。

Plunker example