ionic4中怎么修改宿主樣式


這里拿 ion-select 做測試
ionViewDidEnter() {
    // tslint:disable-next-line:variable-name
    const select_elements = (this.el.nativeElement.querySelectorAll('ion-select'));
    const styles = `
      .select-text {
        color:red;
      }
    `;
    select_elements.forEach((element) => {
        this.injectStyles(element, '.select-text', styles);
    });
}

/* 修改樣式的方法 其實可以封裝一個公共的工具類,你們去折騰吧*/
injectStyles(
    shadowRootElement: HTMLElement,
    insertBeforeSelector: string,
    styles: string
) {
    const root = shadowRootElement.shadowRoot;
    const newStyleTag = document.createElement('style');
    newStyleTag.innerHTML = styles;
    root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));
}

 記得導入 ElementRef

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

參考博客:https://www.cnblogs.com/johnjackson/p/11927777.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM