Ionic5中离子输入元素随反应的变化

Question

我想改变风格(背景颜色为特定)的一个简单的IonInput下的Ionic5使用与反应。

<IonContent className="ion-padding">
  <IonInput className="username" placeholder="Username" />
  <IonInput type="password" placeholder="Password" />
</IonContent>

我已经尝试将样式直接添加到

<IonInput
  style={{
   backgroundColor: "red"
  }}
  placeholder="Username"
/>

..。并将样式添加到相应的.css文件中。

.IonInput {
  background: red;
}

但这些尝试似乎都改变不了任何事情。

有什么想法吗?我可以如何修改Ionic5特定HTML元素中的样式？

Answer 1

实现你的目标有两种方法。离子大量使用css变量。它们为我们公开--background以自定义背景色

第一条路:使用--直接使用背景风格的

<IonInput placeholder="Username" style={{ '--background': '#fff'}} />

2 way:使用className

<IonInput placeholder="Username" className="username" />

ion-input.username {
  --background: #F00;
}

虽然以上可以修复离子输入的样式，但铬自动输入有可能会覆盖该样式。