从 Angular 应用程序中的父组件继承 CSS答案

【问题标题】：Inherit CSS from parent component in Angular Application从 Angular 应用程序中的父组件继承 CSS
【发布时间】：2018-08-10 06:23:33
【问题描述】：

我正在构建一个应用程序，我必须硬“重置”浏览器应用的所有默认 CSS。

但是，我必须为每个 xxx.component.css 复制/粘贴它，因为它似乎没有从基线 app.component.css 继承任何 css。

一切都位于app.component.html 模板下，如下所示：

<div class="wrapper">
  <app-left-nav></app-left-nav>
  <app-top-nav></app-top-nav>
  <app-todo-section></app-todo-section>
  <app-details-section></app-details-section>
  <footer></footer>
</div>

在 Angular 中是否可以配置 CSS 继承？它应该默认发生吗？

这是app.component.css 中“重置”代码的 sn-p：

html,
body,
div,
span,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

我做错了吗？如果需要代码示例，请告诉我！

【问题讨论】：

你能放一个带有css的代码示例吗？
@Aruna 具体来自哪个文件？我已经粘贴了app.component.css 重置的 sn-p。我必须将此代码粘贴到每个 Angular component.css 文件中
你能把你的角度代码和它在哪个视图中工作和不工作？
@Aruna 为什么？在这种情况下，没有“工作”和“未工作”。我的 app.component.css 中的 css 没有应用于子组件，所以我手动将其应用于 xxx.component.css，这违反了 DRY 原则。这里涉及到很多文件，你具体想看什么？

标签： html css angularjs inheritance

【解决方案1】：

在 Angular 中，每个组件都有自己的 css。根据angular 6 documentation，此样式仅适用于组件。 Angular 通过为每个 html 元素和组件中的每个 css 选择器设置一个属性来实现这一点。例如：

html

<nav _ngcontent-c2="" id="main-navigation">
  <ul _ngcontent-c2="">
    <li _ngcontent-c2="" routerlink="/dashboard" tabindex="0" ng-reflect-router-link="/dashboard"></li>
    <li _ngcontent-c2="" routerlink="/inbox" tabindex="0" ng-reflect-router-link="/inbox"></li> 
  </ul>
</nav>

css

#main-navigation[_ngcontent-c2] > ul[_ngcontent-c2] > li[_ngcontent-c2] {
    flex: 1;
    border-right: 1px solid rgb(240, 240, 256);
    text-align: center;
    cursor: pointer;
}

如果您想使用适用于所有元素的样式，请将其添加到 src/styles.css 文件中。但即便如此，它也可能有点棘手，因为 Angular 会为您添加的每个组件添加一个 html-tag。

【讨论】：

【解决方案2】：

无论您使用什么框架，您的 CSS 都将始终根据 CSSOM 被继承。因此，如果您的 CSS 不适用于子组件，请执行以下操作：

查看对应页面是否正在加载默认样式的CSS文件
查看相应页面中是否存在您或您可能正在使用的任何框架的覆盖 CSS 样式。

TL;DR：是的，它应该默认发生

话虽如此，您应该注意某些 CSS 属性不是继承的。有关 CSS 继承规则的完整列表，请参阅 here

在您使用的属性中，以下属性未被继承：

边距
填充
边框
垂直对齐

但是，如果只是您在列表中定义的 HTML 标记需要应用您的 CSS，则这无关紧要。以上仅适用于您想要继承

【讨论】：