刚升级ionic4,就遇到各种坑,其中一个比较严重的,就是不能像以前一样愉快的更改ionic组件的css了,因为ionic4采用了shadow dom，修改样式需要使用其暴露出来的属性，未暴露的则需要自己通过js获取shadow dom强行修改，因为shadow 和 deep等刺穿shadow dom的方法目前已经废弃。在Google上找了很久，终于找到了一个比较好的能够通过ts处理样式的方法。
git地址
https://github.com/adamlacombe/Shadow-DOM-inject-styles.git
安装方式是通过git直接进行安装
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是因为发现在直接调用方法时,会获取不到shadow dom 的style标签,所以通过setTimeout来做个延迟。
