首页 > 其他 > 详细

ionic4中怎么修改宿主样式

时间:2020-01-21 10:05:06      阅读:135      评论:0      收藏:0      [点我收藏+]
这里拿 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

ionic4中怎么修改宿主样式

原文:https://www.cnblogs.com/0955xf/p/12220089.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!