我有一个父组件:

<parent></parent>

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子模板:

<div class="child">Test</div>

由于父组件和子组件是两个独立的组件,它们的样式被锁定在自己的范围内。

在我的父组件中,我尝试这样做:

.parent .child {
  // Styles for child
}

但是.child样式没有应用到子组件。

我尝试使用styleUrls将父组件的样式表包含到子组件中,以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,我还尝试了另一种方法,将子样式表取到父样式表中,但这也没有帮助。

那么,如何样式包含在父组件中的子组件呢?


当前回答

可悲的是/deep/选择器已弃用(至少在Chrome中) https://www.chromestatus.com/features/6750456638341120

简而言之,(目前)似乎没有长期的解决方案,除了以某种方式让你的子组件动态地设置样式。 你可以传递一个样式对象给你的孩子,并通过以下方式应用它: < div [attr.style] = " styleobject " > 或者如果你有一个特定的风格,你可以使用像这样的东西: < div [style.background-color] = " colorvar " >

更多与此相关的讨论: https://github.com/angular/angular/issues/6511

其他回答

要在子组件中为元素的类赋值,可以在子组件中使用@Input字符串,并将其用作模板中的表达式。下面是我们在共享Bootstrap加载按钮组件中更改图标和按钮类型的示例,而不影响它在整个代码库中的使用方式:

app-loading-button.component.html(孩子)

<button class="btn {{additionalClasses}}">...</button>

app-loading-button.component.ts

@Input() additionalClasses: string;

parent.html

<app-loading-button additionalClasses="fa fa-download btn-secondary">...</app-loading-button>

也有同样的问题,所以如果你在scss/sass中使用angular2-cli,使用'/deep/'而不是'>>>',最后的选择器还不支持(但适用于css)。

设'parent'是父类的类名,'child'是子类的类名

.parent .child{
//css definition for child inside parent components
} 

你可以使用这个格式来定义父组件中的子组件的CSS格式

可悲的是/deep/选择器已弃用(至少在Chrome中) https://www.chromestatus.com/features/6750456638341120

简而言之,(目前)似乎没有长期的解决方案,除了以某种方式让你的子组件动态地设置样式。 你可以传递一个样式对象给你的孩子,并通过以下方式应用它: < div [attr.style] = " styleobject " > 或者如果你有一个特定的风格,你可以使用像这样的东西: < div [style.background-color] = " colorvar " >

更多与此相关的讨论: https://github.com/angular/angular/issues/6511

简单的回答是,你根本不应该这么做。它破坏了组件封装,破坏了从自包含组件中获得的好处。考虑将道具标志传递给子组件,然后它可以自行决定如何以不同的方式呈现或应用不同的CSS,如果需要的话。

<parent>
  <child [foo]="bar"></child>
</parent>

Angular不赞成所有影响父样式的子样式的方法。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep