使用 React 更改 Ionic 5 中 Ion Input 元素的样式

Question

我想更改在 Ionic5 下与 React 一起使用的简单 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;
}

但是 none 这些尝试似乎改变了一切。

知道如何修改 Ionic5 特定 HTML 元素中的样式吗？

Answer 1

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

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

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

第二种方式：使用className

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

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

P.S。虽然上面可以修复 ion-input 的样式，但是 chrome auto input 有可能会覆盖样式。

使用 React 更改 Ionic 5 中 Ion Input 元素的样式

Change styling of IonInput-elements in Ionic5 with React

input

styling

reactjs

ionic5