首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Angular应用程序中从父组件继承CSS

在Angular应用程序中从父组件继承CSS
EN

Stack Overflow用户
提问于 2016-11-07 12:47:16
回答 2查看 2.5K关注 0票数 3

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

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

所有内容都位于app.component.html模板下,如下所示:

代码语言:javascript
复制
<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中“重置”代码的一小段

代码语言:javascript
复制
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;
}

我做错了什么吗?如果需要代码示例,请让我知道!

EN

回答 2

Stack Overflow用户

发布于 2018-08-10 06:23:34

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

html

代码语言:javascript
复制
<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

代码语言:javascript
复制
#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。

票数 0
EN

Stack Overflow用户

发布于 2016-11-07 13:58:59

无论您使用哪种框架,您的CSS都将根据CSSOM进行继承。因此,如果CSS在子组件上不起作用,请执行以下操作:

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

TL;DR:是,默认情况下会发生

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

在您使用的属性中,以下属性未被继承:

  • margin
  • padding
  • border
  • vertical-align

但是,如果只是您在列表中定义的HTML标记需要应用CSS,这应该无关紧要。仅当您需要继承时,上述方法才适用

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40458014

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档