Angular - 样式未从父级应用到我的自定义组件

Question

我不明白为什么我的保证金没有应用在这个例子中。看来前路够坎坷了。

应用程序模板：

<my-component class="my-class">Test</my-component>
<div>Some Conent</div>

应用程序风格：

.my-class { margin-bottom: 30px;  } 
div { background-color: red; }

组件模板：

<div><ng-content></ng-content></div>

div获得红色背景，但两者之间没有边距；

笨蛋：https://plnkr.co/edit/oUczApNhhPrAOKy5Iclp

Answer 1

因为 Angular 的组件选择器不是“真正的”html 元素，因此它们没有默认样式。因此，浏览器不知道如何显示它们，并且不会应用任何对组件周围的 CSS 布局有影响的样式（例如margin或height）。

要解决此问题，您需要将 css 属性应用为除组件display之外的任何值。none

例如：

.my-class {
  display: block;
  margin-bottom: 30px;
}