場(chǎng)景：需要根據(jù)實(shí)際項(xiàng)目需求，修改引入的第三方組件的部分樣式
目錄
- 修改父組件的元素的樣式
- 修改子組件的元素的樣式
- 依據(jù)父組件有無某個(gè)類，來修改組件本身的樣式
一、修改父組件的元素的樣式
:host
:host偽類，這是在組件內(nèi)部獲取到其宿主元素的唯一方式，會(huì)向上一直查找到根元素body
具體使用方法：
// 默認(rèn)當(dāng)前在一個(gè)組件中，該組件位于一個(gè)父組件中，且該組件引入了第三方子組件
// 以下內(nèi)容為當(dāng)前組件引用的css文件里的內(nèi)容
// 第一種方式
// ele : 當(dāng)前元素
ele:host h1 {
font-size: 20px;
}
// 效果： 修改父組件的h1元素字體大小為20px。
// 第二種方式
ele:host(.active) h1 {
font-size: 20px;
}
// 效果: 修改父組件類為active元素下的h1元素的字體大小。
二、 修改子組件的元素的樣式
/deep/ 或 >>>
/deep/ 和 >>> 是一個(gè)意思兩種寫法，都是操作子組件的元素的。
具體使用方法：
ele /deep/ h1 {
font-size : 16px;
}
// 效果：/deep/ 最好是寫在一個(gè)元素后面， 不然編輯器lint會(huì)報(bào)紅， 這里是查找子組件的h1元素，并修改它的字體大小
等同于：
ele >>> h1 {
font-size : 16px;
}
三、 依據(jù)父組件有無某個(gè)類，來修改組件本身的樣式
:host-context
:host-context，和:host類似，都是獲取宿主元素，雖然都是查找宿主元素，但它們是有區(qū)別的， :host修改的還是宿主元素，:host-context修改卻是當(dāng)前組件，后者是針對(duì)父組件是否具備某個(gè)類名作出相應(yīng)的樣式改變響應(yīng)。
具體使用方法：
ele:host-context(.active) h1 {
border: 1px dotted #f00;
}
// 效果： 當(dāng)宿主元素?fù)碛衋ctive類時(shí)，才修改當(dāng)前組件的h1元素的border屬性樣式。
