在< ng-content>上自定义样式在angular2中不起作用? [英] Custom Styling on <ng-content> in angular2 not working ?

问题描述

我正在尝试使用内联CSS设置<ng-content>的样式，但是样式在ng-content上不起作用，我还需要做其他样式设计吗?

I am trying to style <ng-content> using inline css but seems style does't work on ng-content, i have to do something else for styling ?

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

此处，红色类适用于p，但不适用于

here class red works on p but not on

工作示例

推荐答案

::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 */ }

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选择器

You can use the ::content selector

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

或

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

根据Web组件规范::content应该足够，并且不需要>>>，但是没有它就不能应用样式.

According to the web components spec ::content should be enough and >>> should not be required but the styles were not applied without it.

柱塞示例

这篇关于在&lt; ng-content&gt;上自定义样式在angular2中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！