假设我有一个这个模板的组件：
<div class="frame">
<span class="user-defined-text">{{text}}</span>
</div>
<style>
span { font-size: 3em; }
.frame { ... }
</style>
如何合并应用于组件的样式,例如
<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>
解决方法
> set encapsulation：ViewEncapsulation.None允许外部样式被应用.
import {Component,ViewEncapsulation} from '@angular/core';
@Component({
selector: 'custom-component',encapsulation: ViewEncapsulation.None
})
export class Custom {
:host(.someClass) {
background-color: blue;
}
<custom-component class="someClass"></custom-component>
根据添加到元素的类来应用样式.
