将自定义样式表应用于离子输入的最佳方法是什么？我尝试通过添加自定义类来实现，但它并未更新CSS的所有属性。
这是我的代码
<h1>Log In</h1>
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input class="form-input" name="email" type="email" placeholder="[email protected]" 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;
}
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;
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句