如何修改Ionic ion-datetime弹窗按钮的text-transform属性？

问题说明 #

需要将ion-datetime组件弹窗内按钮的text-transform属性设置为none，尝试通过.export-ion-modal::part(native)修改未生效——原因是native属于弹窗内部ion-button的Shadow Part，而非modal本身的Part。

有效代码示例 #

方式一：全局精准匹配 #

/* 定位到datetime弹窗内的ion-button，修改其native part样式 */
ion-modal ion-button::part(native) {
  text-transform: none;
}

方式二：结合自定义modal类（推荐） #

如果给弹窗加了.export-ion-modal类，可缩小样式作用范围：

.export-ion-modal ion-button::part(native) {
  text-transform: none;
}

关键原因 #

ion-datetime弹出的弹窗是独立的ion-modal容器，里面的确认/取消按钮是嵌套的ion-button组件。之前的代码错误地直接给modal容器应用::part(native)，而该Part属于内部的ion-button，必须先选中modal内的ion-button，再通过它的native Part来修改样式。

内容的提问来源于stack exchange，提问作者tiga05