通过浏览器调试可以找到需要更改的UI组件样式,找到其CSS class类名后,通过CSS无法直接修改样式,需要使用shadowRoot.appendChild();方法注入新的样式覆盖原来的样式达到修改原样式的目的。
一、编写HTML
Tab 2
点击变色
二、编写CSS
.datetime-text{
color:red !important;
}
三、编写TS代码
import { Component,ViewChild,Renderer2 } from '@angular/core';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
@ViewChild("date") date:any;
styleSheetDate:string = `
.datetime-text{
color:red !important;
}
`;
constructor(private renderer2:Renderer2) {}
//修改样式
changeStyle(){
this.injectStyleToShadowRoot(this.renderer2,this.date.el,this.styleSheetDate)
}
//向ShadowRoot注入样式表覆盖修改原样式
//Renderer2:angular提供操作DOM的类
//Element:指定需要操作的DOM
//string:向ShadowRoot里注入的样式表
injectStyleToShadowRoot(renderer: Renderer2, element: Element, styleSheet: string) {
const style = renderer.createElement('style');
style.innerHTML = styleSheet;
element.shadowRoot.appendChild(style);
}
}
四、运行代码
4.1、可以看到CSS样式并没有生效,通过浏览器调试找到CSS class类名没有错误。
4.2、通过点击按钮向ShadowRoot里注入新的样式表覆盖原来的样式,改变字体颜色为红色。
可以看到现在通过shadowRoot.appendChild()方法注入的样式生效了,浏览器调试查看样式,生成了一个