Angular 5 中的样式问题

妖狐艹你老母 2022-06-01 11:43 172阅读 0赞

用了别人写的指令，里面返回了html标签。傻傻的，在Angular 5的component中定义了样式，但是样式就是不起作用，不起作用有没有！那种无奈的感觉，chrome查看，居然是

user agent stylesheet

起作用。 user agent stylesheet可是浏览器的默认样式，随便一个样式都能覆盖，我定义的样式怎么没用呢？为什么不覆盖呢？

查看HTML元素的样式表，发现 定义的样式后面都加了个 _ngcontent-c#

这是Angular为了区分自己的样式，特意加的标记。

例如：

  1. ComponentA <span></span> <comp-b></comp-b> ComponenB <h1></h1>

实际渲染会变成：

  1. <comp-a> <span _ngcontent-c0></span> <comp-b _ngcontent-c0> <h1 _ngcontent-c1></h1> </comp-b> </comp-a>

如果在component中定义了样式，也会在渲染的样式表中加上

  1. _ngcontent-c0

但如果指令返回了html标签，则不会添加该标记，然后样式就匹配不上了。

最后，直接在index.html中定义样式，解决问题。

发表评论

表情：
评论列表 （有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读