Html 如何在角度/离子框架中设置离子输入样式？

我正在使用Angular7和Ionic4，我正在尝试设计一个有许多ion输入的表单

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

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

我试着给ion输入一个类，听说这样修改CSS会更容易，但它不起作用

这就是我的HTML输入代码的样子：

以及CSS代码：

离子输入{
--背景：rgb（219）；
}
.itemform{
边界半径：10px！重要；
左侧填充：30px！重要；
右侧填充：30px；
字号：0.9em；
边框：1px实心#f1f1；
背景：rgb（219219219219）；
身高：10%；
宽度：50%；
}

宽度可以更改为稍小一点，但高度有一个默认值（或我不理解的问题），无法调整大小

---

我想了解为什么不能更改高度，以及如何更改高度，使我的离子输入看起来更好。

下面的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;
        }

---

由于使用了阴影DOM，因此无法添加自定义样式。自定义组件的官方推荐方法是使用CSS自定义属性：

---

您还可以使用全局css实用程序：

使用css属性更改填充顶部和底部

--padding top

和

--padding bottom

不会更改高度？我已经尝试了--padding top，-padding bottom和padding top，padding bottom。。我可以让它看起来更大使用填充顶部，但使它更小，它不工作。我不明白我做错了什么。我会尝试一下你的代码，然后告诉你它是否有效。但无论如何，非常感谢您抽出宝贵的时间！：）