使用React更改Ionic5中IonInput元素的样式

Question

我想更改与React一起使用的Ionic5下的简单IonInput的样式(具体的背景颜色(。

<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

有两种方法可以实现您的目标。ionic大量使用css变量。他们曝光--background，让我们自定义背景色

第一种方式：直接在样式中使用--background

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

第二种方法：使用className

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

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

附言：尽管以上可以修复离子输入的样式，但铬自动输入有可能会覆盖该样式。