修改 ion-datetime 按钮 css 属性

Question

我想将日期时间按钮的按钮文本转换属性更改为无。现在我的按钮看起来像这样：

根据 Ionic 文档，我无法通过 CSS 阴影部分访问按钮属性：https://ionicframework.com/docs/api/datetime#css-shadow-parts。

但根据 ion-button 文档，可以通过本机属性访问按钮： https://ionicframework.com/docs/api/button#css-shadow-parts

所以我在这里尝试访问 ion-datetime 模式中的按钮：

.export-ion-modal {
&::part(backdrop) {
    --backdrop-opacity: 0.3;
}
&::part(content) {
    background: var(--ion-color-primary-contrast);
    border-radius: 26px;
    box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 32%);
}
&::part(native){
        text-transform: none;
}
}

不幸的是，这不起作用。是否有可能以某种方式访问 ion-datetime 的按钮属性？

Answer 1

你可以实现这个我的 Js：

const buttons = document.querySelectorAll('ion-datetime ion-button');
buttons.forEach((button) => {
  button.style.textTransform = 'none';
});