如何样式子组件从父组件的CSS文件?

我有一个父组件:

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

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

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

当前回答

我已经在Angular之外解决了这个问题。我已经定义了一个共享的scss，并将其导入到我的子程序中。

shared.scss

%cell {
  color: #333333;
  background: #eee;
  font-size: 13px;
  font-weight: 600;
}

child.scss

@import 'styles.scss';
.cell {
  @extend %cell;
}

我提出的方法是如何解决OP提出的问题。正如在多个场合提到的，::ng-deep，:ng-host将被贬低，在我看来，禁用封装只是太多的代码泄漏。

2019-08-05 10:19:04

其他回答

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

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

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

2017-04-13 19:59:32

在Angular中有几个选项可以实现这一点:

1)你可以使用深层css选择器

:host >>> .childrens {
     color: red;
 }

2)你也可以改变视图封装，它被设置为模拟作为默认值，但可以很容易地改变为本地使用阴影DOM原生浏览器实现，在你的情况下，你只需要禁用它

例如:“

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

@Component({
  selector: 'parent',
  styles: [`
    .first {
      color:blue;
    }
    .second {
      color:red;
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
 })
 export class ParentComponent  {
   constructor() {

   }
 }

2017-08-12 09:39:23

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

使用@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;
}

2021-09-22 09:51:04

我也有这个问题，不想使用弃用的解决方案所以我最后得出:

在parrent

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

子组件

@Input() ContainerCustomStyle: string;

在child In HTML div中

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

在代码中

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

作品像预期的那样，不应该被弃用;)

2019-04-03 11:54:15