在使用Ionic的時候，難免會出現要修改原有樣式的情況。但新版的Ionic采用了ShadowRoot來隔離樣式，不能愉快的直接通過CSS修改ShadowRoot下的樣式，但我們又想修改，怎么辦呢？

方法一

使用 CSS3 ::part偽元素 （但該方法有局限性，有些組件并未對外提供足夠的CSS Shadow Parts，且一些瀏覽器尚未支持該偽元素。）

首先打開你想修改樣式的組件的開發(fā)文檔（筆者這里以 ion-back-button 組件為例），找到CSS Shadow Parts（一些組件并未提供CSS Shadow Parts，解決辦法詳見方法二）。

ion-back-button CSS Shadow Parts

可以看到該組件提供了三個CSS Shadow Part，然后我們使用快捷鍵F12 或者 ctrl + shift + i打開Web開發(fā)者工具，找到ion-back-button，并找到這三個Part。

ion-back-button dom.png

筆者這里想要修改ion-back-button的文字樣式，則使用::part偽元素選中text這個part，方法如下：

ion-back-button::part(text) {
  background: var(--custom-color-gray);
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  border-radius: 1rem;
}

這樣子就大功告成啦！

方法二

原理：通過注入一個style元素到ShadowRoot下來覆蓋樣式。

方法如下：

import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
/*
  此處省略非關鍵代碼
*/
export class ExamplePage implements OnInit {
    constructor(
        private renderer2: Renderer2,
        private element: ElementRef
    ) { }

    ngAfterViewInit() {
        // 修改返回按鈕中文本的樣式
        const ionBackButton = this.element.nativeElement.querySelector('ion-back-button');
        const styleSheet = `
            .button-text {
                background: var(--custom-color-gray);
                padding: .2rem .4rem;
                font-size: .8rem;
                border-radius: 1rem;
            }
        `;
        this.injectStyleToShadowRoot(this.renderer2, ionBackButton, styleSheet);
    }

    /**
     * 注入CSS樣式到目標元素的ShadowRoot中
     * @param renderer 渲染器
     * @param element 目標元素
     * @param styleSheet CSS樣式
     */
    injectStyleToShadowRoot(renderer: Renderer2, element: HTMLElement, styleSheet: string): void {
        const style = renderer.createElement('style');
        style.innerHTML = styleSheet;
        element.shadowRoot.appendChild(style);
    }
}

由于Angular不建議直接用原生的方法來操作DOM，在這里故使用ElementRef，Renderer2 來實現。
注意：將修改樣式的代碼放置于 ngAfterViewInit() 生命周期函數中，避免獲取不到元素的問題。

Tips：當然，將 injectStyleToShadowRoot() 方法封裝在一個公共的工具類中是更好的做法，筆者這里為了便于展示代碼，直接封裝在Component中了。