如何在 Angular/Ionic 框架中设置离子输入样式？

Question

我正在使用 Angular 7 和 Ionic 4，我正在尝试设计一个具有许多离子输入的表单。

我已经尝试了很多 CSS 选项，但似乎没有任何效果。

现在，我拥有的离子输入高度非常大，我想让它们看起来更好、更小。

我尝试为 ion-inputs 提供一个类，听说这样修改 CSS 会更容易，但它不起作用。

我的输入HTML代码如下所示：

<ion-item lines="none" class ="itemform">
   <ion-input  class ="inputClass" id = "nameInput" [(ngModel)]="name" 
       [ngModelOptions]="{standalone: true}" type = "text" placeholder = 
       "Package's Name" required>
   </ion-input>
</ion-item>

以及CSS代码：

ion-input{
    --background: rgb(219,219,219);

}

.itemform {
    border-radius: 10px !important;
    padding-left: 30px !important;
    padding-right: 30px;
    font-size: 0.9em;
    border: 1px solid #f1f1f1;
    background: rgb(219, 219, 219);
    height: 10%;
    width: 50%;
}

宽度可以改小一点，但是高度有默认值（或者我不明白的问题）并且无法调整大小。

我想了解为什么高度不能改变以及如何改变它并使我ion-input看起来更好。

Answer 1

下面的CSS对我来说效果很好

ion-input{
            border-radius: 10px !important;
            padding-right: 30px;
            font-size: 0.9em;
            border: 1px solid #f1f1f1 !important;
            --background: rgb(219,219,219) !important;
            /* height: 10%; */
            /* width: 41%; */
            max-width: 50vw; // this is applying perfectly
            max-height: 10vh;
        }