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

Question

将自定义样式表应用于离子输入的最佳方法是什么？我尝试通过添加自定义 class 但它没有更新 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;
}

Answer 1

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

替换这个padding -

padding: $input-padding-25;

使用这个 -

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

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

Ionic 5 - How to apply custom styling to ion-input

html

css

ionic5