Change styling of IonInput-elements in Ionic5 with React

Question

I want to change the styling (the background-color to be specific) of a simple IonInput under Ionic5 used with React.

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

I already tried adding styles directly to the element with

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

... and adding styles to the corresponding .css file

.IonInput {
  background: red;
}

but none of those attempts seem to change anything.

Any ideas how I can modify styles in Ionic5-specific HTML-elements?

Answer 1

There are 2 ways to achieve your goal. ionic use css variables heavily. they expose --background for us to customize the background color

1st way: use --background in style directly

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

2nd way: use className

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

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

P.S. although the above can fix the style of ion-input, there is a chance where chrome auto input will override the style.