Dynamic className in Ionic + React not working

I’m trying to pass className dynamically for components.

import { IonRow, IonItem, IonLabel, IonCol, IonInput, IonTextarea } from '@ionic/react';
import React from 'react';
import './InputField.css';

interface MyState {
    elementType: any;
    elementConfig: any;
    value: any;
    validation: any;
    valid: boolean;
    touched: boolean;
    children: any;
    changed: any,
}

const InputField: React.FC<MyState> = (props) => {

    let inputElement: any;
    let inputClasses = "InputElement";

    switch ( props.elementType ) {
        case ( 'email' ):
            inputElement = (
                <IonInput
                    className={inputClasses}
                    {...props.elementConfig}
                    value={props.value}
                    onIonChange={props.changed} />
                );
            break;
        default:
            inputElement = (<IonInput
                className={inputClasses}
                {...props.elementConfig}
                value={props.value}
                onIonChange={props.changed} />);
    }

    return (
        <IonItem>  
            <IonLabel color="medium" position="floating">{props.children}</IonLabel>
            {inputElement}
        </IonItem>
    );

};

export default InputField;

The class name appears right when I inspect it but the style is not applied. Also, the text is floating in this case, which disappears. But when I click to enter something it reappears (pic attached below).

Screenshot 2020-10-18 at 19.41.21770×218 1.98 KB

Screenshot 2020-10-18 at 19.41.29762×184 3.07 KB

1 post - 1 participant

Read full topic