我在使用ion 6时遇到了一些困难,没有一篇文章包含解决这个问题的方法。我想对阴影根部分的picker项应用一些自定义样式。
对.picker-item
和.picker-item-active
这样的类应用CSS没有任何作用,因为它们位于shadow-root中,而且似乎没有任何样式属性和变量可供我使用。
我使用的标准ion-datetime
组件如下所示:
<ion-datetime presentation="time"></ion-datetime>
在模拟器中检查HTML时,它显示为:
我想更改的样式:
- 选取器项的颜色和字体属性
- 活动选取器项的颜色、背景和字体属性
2条答案
按热度按时间gab6jxml1#
因为它们都是
open
shadowRoot,所以可以进入并注入一个<style>
表:dfddblmv2#
经过一些更多的发挥左右,我已经能够找到一个解决方案,并自定义它,以我的项目需要。感谢 * 丹尼'365 csi'恩格尔曼 * 的灵感。
在我的项目中使用和定制ion-datetime是很复杂的,因为使用了多个动态出现和消失的ion-datetime元素。因此,应用定制样式需要一些额外的逻辑,这里没有公布。如果你需要一些帮助,请联系。
下面是允许我对ion-datetime应用一些样式的基本逻辑: