Angular 在组件中无法使用某些样式？答案

【问题标题】：Angular not working some styles in component?Angular 在组件中无法使用某些样式？
【发布时间】：2021-01-06 17:54:55
【问题描述】：

我有一个<app-component></<app-component>，看起来像

<div class="vacancy__accordion">
 .....
</div>

我已将组件放在一个父 div 中，即 flex 父级

<div class="parent__div">
  <app-component></app-component>
  <div class="another__child"></div>
</div>

这里是css属性：

.parent__div {
  display: flex;
}
.vacancy__accordion {
  flex-grow: 1;
}

此时，css 无法在 .vacancy__accordion 上正常工作，因为 .parent__div .vacancy__accordion 不是父组件的直接子组件。
如果我把它放在<app-component>:host {flex-grow: 1} 里面，它可以工作，但我不认为这是最好的设计。
这种情况下的解决方案是什么？我应该让我的<app-component> 扩展类和标签名称还是其他什么？

【问题讨论】：

是的。 Angular 使用 css 封装。阅读更多关于它的信息：angular.io/guide/component-styles
我认为你的组件应该独立于父布局。我认为更好的设计是将您的组件包裹在一个 div 中，然后将 flex-grow css 应用到该组件上。

标签： angular

【解决方案1】：

Angular 使用 CSS 封装。对于您编写的每个 Angular 组件，您不仅可以定义一个 HTML 模板，还可以定义与该模板一起使用的 CSS 样式，指定您需要的任何选择器、规则和媒体查询。一种方法是在组件元数据中设置样式属性。

@Component 元数据中指定的样式仅适用于该组件的模板。

它们不会被嵌套在模板中的任何组件继承，也不会被投射到组件中的任何内容继承。阅读有关它的所有内容：https://angular.io/guide/component-styles

【讨论】：