Question

如何在angular 5

中使用父组件的css到子组件

例如

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

需要将父组件的css用于子组件。

Answer 1

一个选项是引用子组件装饰器中的父样式表。

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./parent.component.css']
})

第二个选项可能是使用sass / scss并将.scss文件导入父级和子级的css文件中。

@import 'a/common/style/sheet/for/parent/and/child';

Answer 2

你可以使用组合器::ng-deep 像这样：

styles: [

     :host { color: black; }

     :host ::ng-deep parent {
       color:yellow;
     }
     :host ::ng-deep child{
       color:green;
     }
     :host ::ng-deep child.class1 {
       color:orange;
     }
     :host ::ng-deep child.class2{
       color:red;
     }

],

Answer 3

只需使用＆＃34; ViewEncapsulation＆＃34;您的子组件上的属性，将其设置为none。这将允许您在父元素中编写将应用于子元素的css。希望这会对你有所帮助。

检查下面的链接： https://alligator.io/angular/viewencapsulation/

如何在angular 5中使用父组件的css到子组件

3 个答案: