IonInput floating outline not working

[allestaire]

I dont know if this is a known issue but it seems like the example page is not the same when using the framework

Notice that on this image there are no borders

Code example

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCol, IonGrid, IonRow, IonInput, IonButton, IonRippleEffect } from '@ionic/react';
import './index.css';

const Login: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div className="login-bg">
          <IonGrid>
            
          </IonGrid>
          <IonGrid>
            <IonRow>
              <IonCol>
                <IonInput label="Username" labelPlacement="floating" fill="outline"></IonInput>
              </IonCol>
            </IonRow>
            <IonRow>
              <IonCol>
                <IonInput label="Password" labelPlacement="floating" fill="outline" type="password"></IonInput>
              </IonCol>
            </IonRow>
            <IonRow>
              <IonCol>
                <IonButton expand="block">
                  Login
                  <IonRippleEffect></IonRippleEffect>
                </IonButton>
              </IonCol>
            </IonRow>
          </IonGrid>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Login;

Ionic 7
React

[allestaire]

This is not good, the example and result is not the same, tsk tsk,

[ldebeasi]

Are you running that sample in iOS mode? As per the input documentation (also see ion-input: Custom Input Value Type Styling and CSS Properties) this feature is only available in MD mode.

[allestaire]

Hmm seems weird, the UI works fine now,
I guess in order to make it reflected I have to restart the ionic serve