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);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步