ionic4封装样式原理

查看文档：

https://www.cnblogs.com/WhiteCusp/p/4342502.html

 

https://www.jianshu.com/p/bb291f9678e1

 

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

 

import {Component, ElementRef, OnInit} from '@angular/core';

import {injectStyles} from 'shadow-dom-inject-styles';

@Component({

　　selector: 'app-tab1',

　　templateUrl: 'tab1.page.html',

　　styleUrls: ['tab1.page.scss']

})

export class Tab1Page {

　　constructor(private el: ElementRef) {

　　　　setTimeout(() => {

　　　　　　const toolbar = (this.el.nativeElement.querySelector('ion-header > ion-toolbar') as HTMLElement);

　　　　　　// language=CSS

　　　　　　const styles = `

　　　　　　　　.toolbar-background {

　　　　　　　　　　background: red !important;;

　　　　　　　　}

　　　　　　`;

　　　　　　injectStyles(toolbar, '.toolbar-background', styles);

　　　　}, 50);

　　}

}