angular2中的<ng-content>自定义样式不起作用？

Question

我正在尝试<ng-content>使用内联css 进行样式,但似乎样式不适用于ng-content,我还需要为样式做些其他事情？

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

这里的班级红色工作,p但不是

Working Example

Answer 1

::content 被忽略了.

这个结束了

您可以使用::content选择器

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

要么

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

如果有LESS用户,似乎LESS编译器不喜欢 >>>语法,所以你需要为它添加一个别名,例如.@deep: ~">>>";然后使用它@{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}']

根据Web组件规格::content应该足够并且>>>不应该被要求但是没有它就不应用样式.

Plunker的例子