我正在用ionic创建我的第一个网络应用程序。
我的应用程序是为了控制某种硬件使用时间表。我使用ion-datetime与presentation ="time"为此目的，我发现它有点太高，所以我想降低它的高度。
这是实现了ion-datetime的组件的代码：

<ion-card>
    <ion-card-content>
            <ion-datetime presentation="time" hourCycle="h23" mode="ios"></ion-datetime>
            <ion-toggle></ion-toggle> 
    </ion-card-content>
</ion-card>

下面是我使用的CSS：

ion-datetime {
  height: 100px;
  max-height: 100px; /* Does not work either! */
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .1);
}

根据官方的docs，没有--height属性或类似其他离子组件的属性，所以唯一自然的方法是常规的css height属性。
但是在将大小设置为100px之后，只有一些视口高度会改变，而ion-datetime的内部部分将保持原始大小，结果如下：

所以我的问题是在演示模式"time"中，改变离子-日期时间高度的正确方法是什么？
有没有一种方法可以做到这一点，而不需要使用阴影域ion-datetime组件进行调整？
如果没有，如何改变阴影圆顶以获得适当的高度结果？
编辑：
如果这是重要的，我正在使用离子/Vue ^6.0.1与Vue3 ^3.0.0，这里是离子卡的css，但我认为它是不与离子卡以任何方式连接...

ion-card {
  border-radius: 8px;
  padding: 0;
  height: 280px;
  box-shadow: none;
  border: 3px solid rgba(0, 0, 0, .1);
  transition: .5s;
  margin: 0;
  position: relative;
  background: white;
  text-align: center;

}