剛升級(jí)ionic4,就遇到各種坑,其中一個(gè)比較嚴(yán)重的,就是不能像以前一樣愉快的更改ionic組件的css了,因?yàn)閕onic4采用了shadow dom，修改樣式需要使用其暴露出來(lái)的屬性，未暴露的則需要自己通過(guò)js獲取shadow dom強(qiáng)行修改，因?yàn)閟hadow 和 deep等刺穿shadow dom的方法目前已經(jīng)廢棄。在Google上找了很久，終于找到了一個(gè)比較好的能夠通過(guò)ts處理樣式的方法。

git地址

https://github.com/adamlacombe/Shadow-DOM-inject-styles.git

安裝方式是通過(guò)git直接進(jìn)行安裝

npm install https://github.com/adamlacombe/Shadow-DOM-inject-styles.git --save

比如需要更改tab為如下樣式

image.png

在tab.page.ts中,代碼如下:

import {Component, ElementRef, OnInit} from '@angular/core';
import {injectStyles} from 'shadow-dom-inject-styles';

@Component({
    selector: 'app-tabs',
    templateUrl: 'tabs.page.html',
    styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {
    constructor(private el: ElementRef) {
    }

    ngOnInit(): void {
        setTimeout(() => {
            let toolbar = (this.el.nativeElement.querySelector('ion-tabs') as HTMLElement);
            toolbar = toolbar.shadowRoot.querySelector('ion-tabbar');
            // language=CSS
            const styles = `
                .tab-btn:nth-of-type(2) .tab-btn-icon {
                    position:absolute;
                    top: -20px;
                    width: 40px;
                    height: 40px;
                    padding: 10px;
                    border: 1px solid #0076FF;
                    border-radius: 50%;
                    color: white;
                    box-shadow: -2px 2px 6px 0 rgba(0, 118, 255, 0.49);
                    background-color: #0076FF;
                }
                :host{
                    contain: none;
                }
            `;
            injectStyles(toolbar, '.tab-btn', styles);
        }, 50);
    }
}

PS:使用setTimeout是因?yàn)榘l(fā)現(xiàn)在直接調(diào)用方法時(shí),會(huì)獲取不到shadow dom 的style標(biāo)簽,所以通過(guò)setTimeout來(lái)做個(gè)延遲。