Ionic 5 - 如何将自定义样式应用于离子输入答案

【问题标题】：Ionic 5 - How to apply custom styling to ion-inputIonic 5 - 如何将自定义样式应用于离子输入
【发布时间】：2020-05-07 22:58:21
【问题描述】：

将自定义样式表应用于 ion-input 的最佳方式是什么？我尝试添加自定义类，但它没有更新 CSS 的所有属性。

这是我的代码

  <h1>Log In</h1>
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input class="form-input" name="email" type="email" placeholder="your@email.com" ngModel required></ion-input>
  </ion-item>
  <ion-item>
      <ion-label position="floating">Password</ion-label>
    <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
  </ion-item>
  <ion-button class="form-input" shape="round" type="submit" [disabled]="form.invalid" expand="block" class="ion-text-capitalize    ">Log In</ion-button>
</div>

.form-input {
    border: 1px solid $input-border-color;
    padding: $input-padding-25;
    color: $input-color;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: $input-font-size;
    font-weight: 500;
    font-family: $font-family-base;
    height: auto;
    -webkit-border-radius: $input-border-radius;
    border-radius: $input-border-radius;
    background: $input-bg;
    line-height: 24px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

【问题讨论】：

标签： html css ionic5

【解决方案1】：

Ionic 5 使用CSS4 变量，CSS4 变量可以在运行时修改。因为 ionic 5 使用 shadow DOM 这是一个 Web 组件标准，并且您不能对 DOM 内部的元素（在运行时创建）进行样式设置，并且是通过 CSS4 变量修改 DOM 以进行样式设置的唯一方法。

替换此填充 -

padding: $input-padding-25;

使用这个 -

--padding-start: 20px;
--padding-top: 20px;
--padding-bottom: 10px;
--padding-end: 10;

【讨论】：