我有一个父组件:

<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',
]

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

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


当前回答

你不应该使用::ng-deep,它已被弃用。在Angular中,从父组件中改变子组件样式的正确方法是使用封装(阅读下面的警告以了解其含义):

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

然后,你就可以修改组件的css,而不需要使用::ng-deep

.mat-sort-header-container {
  display: flex;
  justify-content: center;
}

警告:这样做将使您为该组件编写的所有css规则都是全局的。

为了将你的css的范围限制在这个组件和他的子组件上,在你的组件的顶部标签上添加一个css类,并把你的css“放在”这个标签里:

模板:

<div class='my-component'>
  <child-component class="first">First</child>
</div>,

Scss文件:

.my-component {
  // All your css goes in there in order not to be global
}

其他回答

这是一个只有香草css的解决方案,没有什么花哨的,你甚至不需要!重要。我假设你不能修改子结点,否则答案就更简单了,我把答案放在最后以防万一。

当使用库中预先制作的组件时,有时需要覆盖子CSS,并且开发人员没有提供任何类输入变量。::ng-deep已弃用,encapsulation: ViewEncapsulation. jpgNone将使组件的所有CSS全局化。这里有一个简单的解决方案,这两个都不用。

事实上,我们确实需要一个全局样式,以便CSS到达子节点。我们可以把样式放到styles。CSS中或者我们可以创建一个新的CSS文件并把它添加到angular。json中的样式数组中。唯一的问题是我们需要一个特定的选择器,这样就不会针对其他元素。这是一个非常简单的解决方案-只需在html中添加一个唯一的类名,我建议在类名中使用父组件的名称,以确保它是唯一的。

父组件

<child class="child-in-parent-component"></child>

让我们假设我们想要改变child中所有按钮的背景颜色,我们确实需要实现正确的专一性以确保我们的样式优先。我们可以将!important放在所有属性的旁边,但更好的方法是重复类名,直到我们的选择器足够特定,这可能需要尝试几次。这样,其他人可以在必要时再次重写此css。

全局样式文件

.child-in-parent-component.child-in-parent-component.child-in-parent-component
  button {
  background-color: red;
}

或者用!important(不推荐)

.child-in-parent-component button {
  background-color: red !important;
}

如果子组件可以修改

只需向组件中添加一个输入变量,并使用Angular的ngStyle指令。您可以添加多个变量来为组件的多个区域设置样式。

子组件

type klass = { [prop: string]: any } | null;

@Component({...})
export class ChildComponent {
  @Input() containerClass: klass = null;
  @Input() pClass: klass = null;
...
}
<div [ngStyle]="containerClass">
  <p [ngStyle]="pClass">What color will I be?</p>
</div>

父组件

<child
  [containerClass]="{ padding: '20px', 'background-color': 'black' }"
  [pClass]="{ color: 'red' }"
>
</child>

这是创建具有动态样式的组件的预期方法。许多预制组件都有类似的输入变量。

更新3:

::ng-deep也已弃用,这意味着您不应该再这样做了。当你需要从父组件重写子组件的样式时,不清楚这会如何影响这些事情。对我来说,如果这被完全删除,这似乎很奇怪,因为这将如何影响你需要在库组件中覆盖样式的库?

如果你对此有任何见解,请评论。

更新2:

因为/deep/和所有其他阴影穿刺选择器现在已弃用。Angular放弃了::ng-deep,应该使用它来实现更广泛的兼容性。

更新:

如果使用Angular-CLI,你需要使用/deep/而不是>>>,否则它将无法工作。

原:

在Angular2的Github页面上随机搜索“style”后,我发现了这个问题:Angular2 - innerHTML样式

上面说要使用2.0.0 beta版中添加的一些东西。10、>>>和::shadow选择器。

(>>>)(和等价的/deep/)和::shadow在2.0.0-beta.10中添加。它们类似于shadow DOM CSS组合子(已弃用),并且只适用于封装:ViewEncapsulation。在Angular2中是默认的。它们也可能与ViewEncapsulation一起工作。没有but,然后只是忽略,因为他们是不必要的。在支持更高级的跨组件样式化特性之前,这些组合子只是一种中间解决方案。

所以简单地做:

:host >>> .child {}

在父样式表文件解决了这个问题。请注意,如上面的引用中所述,在支持更高级的跨组件样式之前,此解决方案只是中间的。

我发现如果你可以访问子组件代码,传递@INPUT变量会更简洁:

这个想法是,父进程告诉子进程它的外观状态应该是什么,而子进程决定如何显示这个状态。这是一个很好的建筑

SCSS道:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

更好的方法:-使用选定的变量:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

我希望通过以下方式实现这一目标:

使用@Component将css类添加到宿主元素,并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类,这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版

@Component({
  selector: 'my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
  host: {
    class: 'my-component-class'
  },
  encapsulation: ViewEncapsulation.None
})

结合下面的CSS (my-component.page.scss)

// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
  // will effect direct h1 nodes within template and all h1 elements within child components of the 
  h1 {
    color: red;
  }
}
// without class "scope" will affect all h1 elements globally
h1 {
  color: blue;
}

这对我来说很有效

在父组件中:

<child-component [styles]="{width: '160px', borderRadius: '16px'}" >
</child-component>