angular 组件样式覆盖方式 angular2+

#angular自定义组件样式及修改第三方组件样式

文章内容

1. 技术介绍
2. 修改方式

• 技术介绍

想要修改angular2+ 组件内部样式，先需要了解Angular 的 ViewEncapsulation，即封装模式，主要分为三种

1. Native 原先浏览器 Shadow DOM 行为

2. Emulated 仿真模式，通过 Angular 来模拟类似 Shadow DOM 的行为，angular的默认方式

3. None 无任何封装行为

   区别在于：

   Native其作用是让组件样式不进不出，彻底封闭，全局样式也无法修改内部样式；

   Emulated，其作用是让组件的样式只进不出，换言之即组件内的样式不会影响到外部组件；

   None方式相当于，组件内部定义的样式都是又进又出，相对于定义的全局样式。（非特殊情况慎用）

@Component({
  template: `<h1>test</h1>`,
  styles: [`h1 { color: #f50; }`],
  encapsulation: ViewEncapsulation.Emulated  // 在此 默认 Emulated
})

三种方式生成的分别为

Native

#shadow-root (open)
  <style>h1 { color: #f50; }</style>
<h1>test</h1>

Emulated

<style>h1[_ngcontent-c0] { color: #f50; }</style>
 
<h1 _ngcontent-c0>test</h1>

None

<style>h1 { color: #f50; }</style>

<h1>test</h1>

需要注意的是：Native 和 None 在内容是一样的，但后者none会影响至其他外部组件的 h1 元素

• 修改方式

伪类	使用示例	作用	示例作用
:host	ele:host(.active) h1 { font-size: 20px; }	修改宿主组件(壳子)元素样式	修改了宿主元素有active类下面的h1元素的字体大小为20px
::ng-deep	ele ::ng-deep h1 { font-size : 16px; }	修改子组件的元素的样式	子组件内部所有的h1标签字体都为16px
:host-context	ele:host-context(.active) h1 { border: 1px dotted #f00; }	:host-context，和:host类似，都 可以修改宿主元素及其组件内部的元素样式，但它们是有区别的，:host-context是针对祖先元素（或者宿主元素）是否具备某个类名作出相应的样式改变改变。	当祖先元素或者宿主元素拥有active类时，才修改当前组件的h1元素的border属性样式。