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

Posted 2023-03-06

【中文标题】如何在 Angular/Ionic 框架中设置离子输入的样式？

【英文标题】：How to style ion-input in Angular/Ionic framework?

【发布时间】：2019-09-28 16:26:03

【问题描述】：

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

我尝试了很多 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%;

宽度可以改小一点，但是高度有默认值（或者是我看不懂的问题），不能调整大小。

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

【问题讨论】：

使用 CSS 属性 --padding-top 和 --padding-bottom 更改顶部和底部的填充不会改变高度？

我尝试过使用 --padding-top、--padding-bottom 以及 padding-top、padding-bottom.. 我可以使用 padding-top 让它看起来更大，但让它更小它不工作。我不明白我做错了什么。

【参考方案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;
        

【讨论】：

我会尝试一下你的代码并告诉你它是否有效。但无论如何，还是非常感谢您的宝贵时间！ :)

【参考方案2】：

从 Ionic v3 开始使用影子 DOM，因此无法添加您的自定义样式。自定义组件的官方推荐方法是使用 CSS 自定义属性：https://ionicframework.com/docs/api/input#css-custom-properties

您还可以使用全局 css 实用程序：https://ionicframework.com/docs/layout/css-utilities