Angular 生成的 css 破坏了子组合器

Question

场景：

• 尝试在 Angular 6.1.2 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 中运行一些 flexbox 演示代码，这里是具体示例 (https://codepen.io/chriscoyier/pen/vWEMWw)

• 它不起作用，经过一番探索后，它看起来像 CSS 以浏览器不喜欢的方式进行了修改。

相关 CSS ：

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

这就是我得到的

.wrapper[_ngcontent-c0]    > *[_ngcontent-c0] {
  padding: 10px;
  flex: 1 100%;
 }

工作案例：

.wrapper[_ngcontent-c0]    > * {
  padding: 10px;
  flex: 1 100%;
}

问题：

• 有没有办法阻止 Angular 这样做？
• 我在演示中使用的 CSS 有问题吗？

Answer 1

尝试使用:host，更多参考Check the component styling guide

:host .wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

您也可以尝试使用/deep/

:host /deep/ .wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

嘿，我发现第二种样式有效，Checkout the stackblitz demo