css ion-datetime的Ionic 6样式

klr1opcd  于 2023-02-10  发布在  Ionic
关注(0)|答案(2)|浏览(182)

我在使用ion 6时遇到了一些困难,没有一篇文章包含解决这个问题的方法。我想对阴影根部分的picker项应用一些自定义样式。
.picker-item.picker-item-active这样的类应用CSS没有任何作用,因为它们位于shadow-root中,而且似乎没有任何样式属性和变量可供我使用。
我使用的标准ion-datetime组件如下所示:

<ion-datetime presentation="time"></ion-datetime>

在模拟器中检查HTML时,它显示为:

我想更改的样式:

  • 选取器项的颜色和字体属性
  • 活动选取器项的颜色、背景和字体属性
gab6jxml

gab6jxml1#

因为它们都是open shadowRoot,所以可以进入并注入一个<style>表:

document.querySelector("ion-datetime")
.shadowRoot.querySelector("ion-picker-internal")
.shadowRoot.querySelector("ion-picker-column-internal")
.shadowRoot.prepend( Object.assign( document.createElement("style") , {
  innerText : `
               .picker-item {
                              background:hotpink
                            }
              `
}));
dfddblmv

dfddblmv2#

经过一些更多的发挥左右,我已经能够找到一个解决方案,并自定义它,以我的项目需要。感谢 * 丹尼'365 csi'恩格尔曼 * 的灵感。
在我的项目中使用和定制ion-datetime是很复杂的,因为使用了多个动态出现和消失的ion-datetime元素。因此,应用定制样式需要一些额外的逻辑,这里没有公布。如果你需要一些帮助,请联系。
下面是允许我对ion-datetime应用一些样式的基本逻辑:

document.querySelectorAll("ion-datetime").forEach(dt => {
  var el = dt.shadowRoot.querySelector("ion-picker-internal");
  el.shadowRoot.prepend(Object.assign(document.createElement("style"), {
    innerText: `
      .picker-highlight {
        background: red !important;
      }
    `
  }));
  el.querySelectorAll("ion-picker-column-internal").forEach(col => {
    col.shadowRoot.prepend(Object.assign(document.createElement("style"), {
      innerText: `
        .picker-item {
          color: green !important;
        }    
        .picker-item-active {
          color: blue !important;
        }
      `
    }));
  });
});

相关问题