Angular2如何修改父子组件样式

场景：需要根据实际项目需求，修改引入的第三方组件的部分样式

#目录

1. 修改父组件的元素的样式

• 修改子组件的元素的样式
• 依据父组件有无某个类，来修改组件本身的样式

---

一、修改父组件的元素的样式

:host

:host伪类，这是在组件内部获取到其宿主元素的唯一方式，会向上一直查找到根元素body

具体使用方法：

// 默认当前在一个组件中，该组件位于一个父组件中，且该组件引入了第三方子组件
// 以下内容为当前组件引用的css文件里的内容

// 第一种方式
// ele : 当前元素
ele:host h1 {
  font-size: 20px;
}
// 效果： 修改父组件的h1元素字体大小为20px。

// 第二种方式
ele:host(.active) h1 {
  font-size: 20px;
}
// 效果: 修改父组件类为active元素下的h1元素的字体大小。
复制代码

---

二、 修改子组件的元素的样式

/deep/ 或 >>>

/deep/ 和 >>> 是一个意思两种写法，都是操作子组件的元素的。

具体使用方法：

ele /deep/ h1 {
  font-size : 16px;
}
// 效果：/deep/ 最好是写在一个元素后面， 不然编辑器lint会报红， 这里是查找子组件的h1元素，并修改它的字体大小

等同于：
ele >>> h1 {
  font-size : 16px;
}
复制代码

三、 依据父组件有无某个类，来修改组件本身的样式

:host-context

:host-context，和:host类似，都是获取宿主元素，虽然都是查找宿主元素，但它们是有区别的， :host修改的还是宿主元素，:host-context修改却是当前组件，后者是针对父组件是否具备某个类名作出相应的样式改变响应。

具体使用方法：

ele:host-context(.active) h1 {
  border: 1px dotted #f00;
}
// 效果： 当宿主元素拥有active类时，才修改当前组件的h1元素的border属性样式。
复制代码