React Input Component Looking Wrong

1

Hello,
My input component doesn’t look like in the document.

ProfileTab.jsx

import { Tab, Block, Input } from "framework7-react";

import avatarDefault from "url:../../public/avatar-default.png";

export default function ProfileTab() {
    return (
        <Tab id="tab-profile" className="page-content">
            <Block className="display-flex flex-direction-column align-items-center">

                <img src={avatarDefault} className="avatar" />

                <Input
                    label="Name"
                    placeholder="Your Name"
                    type="text"
                    floatingLabel
                />

            </Block>
        </Tab>
    );
}

Result
Screenshot 2021-08-05 12.09.51

in Document
Screenshot 2021-08-05 12.09.02

2

Input and ListInput are different things

3

Thanks,
I don’t know why I haven’t tried it with ListInput.

4

have the same problem

snaptube vidmate
5

I made one change.

<Input
    label="Name"
    placeholder="Your Name"
    type="text"
    floatingLabel
/>

to

<List noHairlines>
    <ListInput
        label="Name"
        placeholder="Your Name"
        type="text"
        floatingLabel
    />
</List>