javascript 如何从Angular 5中的父级继承子组件中的css样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49516005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to inherit css styles in child component from parent in Angular 5
提问by AlexFF1
I have a parent component inside which I have a child component. The parent component have some css classes, where child component extends them. I tried to use :host as looking at documentation, but cant't seem to get it work properly.
我有一个父组件，其中有一个子组件。父组件有一些 css 类，子组件在其中扩展它们。我尝试使用 :host 来查看文档，但似乎无法正常工作。
child component:
子组件：
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
parent component:
父组件：
<div class="table container">
<div class="table-row header">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<app-child-component></app-child-component>
</div>
parent component css:
父组件css：
:host .table {
display: table;
}
:host .table-row {
display: table-row;
}
:host .table-cell {
display: table-cell;
}
:host .container {
width: 400px;
height: 100vh;
}
:host .header {
background: cyan;
}
:host .body {
background: yellow;
height: 100%;
}
:host .body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
The problem if even I put css classes inside the child component, the layout breaks just because there is a child-component template. So the main question is what is proper way for child to inherit extend css from parent component?
问题是，即使我将 css 类放在子组件中，布局也会因为存在子组件模板而中断。所以主要问题是孩子从父组件继承扩展css的正确方法是什么？
回答by Dheeraj Kumar
Why make things complex?
为什么要把事情弄复杂？
Ideal way to do would be to add refrence of parent css file in child component as well.
理想的做法是在子组件中添加父 css 文件的引用。
@Component({
selector: 'child-app',
templateUrl: `./child.component.html`,
styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }
回答by Damien Asseya
With ::ng-deep, styles will be applied to the current component, but also trickle down to the components that are children to the current component in the component tree.
使用::ng-deep，样式将应用于当前组件，但也会向下传递到组件树中作为当前组件的子组件的组件。
Example:
例子：
:host ::ng-deep app-child-component {
color:yellow;
}
A good resource - Styles Between Components in Angular 2+
一个很好的资源 - Angular 2+ 中组件之间的样式
回答by Chtiwi Malek
Another alternative to ::ng-deep and referencing the parent's css file, is to use the encapsulationcomponent propertie :
另一种替代 ::ng-deep 并引用父级 css 文件的方法是使用封装组件属性：
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None
})
the parent css with flow to all it's childs.
父 css 流向所有它的孩子。
