ionic 修改组件默认样式_Angular/Ionic 修改 ShadowRoot 元素样式

在使用Ionic的时候，难免会出现要修改原有样式的情况。但新版的Ionic采用了ShadowRoot来隔离样式，不能愉快的直接通过CSS修改ShadowRoot下的样式，但我们又想修改，怎么办呢？

方法一

使用 CSS3 ::part伪元素 (但该方法有局限性，有些组件并未对外提供足够的CSS Shadow Parts，且一些浏览器尚未支持该伪元素。)

首先打开你想修改样式的组件的开发文档(笔者这里以 ion-back-button 组件为例)，找到CSS Shadow Parts(一些组件并未提供CSS Shadow Parts，解决办法详见方法二)。

ion-back-button CSS Shadow Parts

可以看到该组件提供了三个CSS Shadow Part，然后我们使用快捷键F12 或者 ctrl + shift + i打开Web开发者工具，找到ion-back-button，并找到这三个Part。

ion-back-button dom.png

笔者这里想要修改ion-back-button的文字样式，则使用::part伪元素选中text这个part，方法如下：

ion-back-button::part(text) {

background: var(--custom-color-gray);

padding: 0.2rem 0.4rem;

font-size: 0.8rem;

border-radius: 1rem;

}

这样子就大功告成啦！

方法二

原理：通过注入一个style元素到ShadowRoot下来覆盖样式。

方法如下：

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

/*

此处省略非关键代码

*/

export class ExamplePage implements OnInit {

constructor(

private renderer2: Renderer2,

private element: ElementRef

) { }

ngAfterViewInit() {

// 修改返回按钮中文本的样式

const ionBackButton = this.element.nativeElement.querySelector('ion-back-button');

const styleSheet = `

.button-text {

background: var(--custom-color-gray);

padding: .2rem .4rem;

font-size: .8rem;

border-radius: 1rem;

}

`;

this.injectStyleToShadowRoot(this.renderer2, ionBackButton, styleSheet);

}

/**

* 注入CSS样式到目标元素的ShadowRoot中

* @param renderer 渲染器

* @param element 目标元素

* @param styleSheet CSS样式

*/

injectStyleToShadowRoot(renderer: Renderer2, element: HTMLElement, styleSheet: string): void {

const style = renderer.createElement('style');

style.innerHTML = styleSheet;

element.shadowRoot.appendChild(style);

}

}

由于Angular不建议直接用原生的方法来操作DOM，在这里故使用ElementRef，Renderer2 来实现。

注意：将修改样式的代码放置于 ngAfterViewInit() 生命周期函数中，避免获取不到元素的问题。

Tips：当然，将 injectStyleToShadowRoot() 方法封装在一个公共的工具类中是更好的做法，笔者这里为了便于展示代码，直接封装在Component中了。