Rendering mantine textInput in react

40 Views Asked by At

I'm encountering a problem with Mantine components not rendering correctly in my React application. Specifically, the TextInput fields are not showing up as expected. I've followed the documentation and examples provided by Mantine, but I'm still facing this issue.

        <form
          action="#"
          className="contact-form"
          onSubmit={(event) => {
            event.preventDefault();
            submit();
          }}>
          <h5 className="title">Contact us</h5>
          <p className="description">
            Feel free to contact us if you need any assistance, any help or
            another question.
          </p>
          <TextInput
            required
            placeholder="Name"
            value={values.name}
            onChange={(event) =>
              submit({ name: event.currentTarget.value })
            }
            error={errors.name && "Name is required"}
            style={{ marginBottom: 10 }}
          />
          <TextInput
            required
            placeholder="Email"
            value={values.email}
            onChange={(event) =>
              submit({ email: event.currentTarget.value })
            }
            error={errors.email && "Please provide a valid email address"}
            style={{
              marginBottom: 10,
              width: "200px",
              height: "200px",
              color: "black",
            }}
          />
          <Textarea
            required
            placeholder="Message"
            value={values.message}
            onChange={(event) =>
              submit({ message: event.currentTarget.value })
            }
            error={errors.message && "Message is required"}
            style={{ marginBottom: 10 }}
          />
          <div className="submit-button-wrapper">
            <Button type="submit" loading={pending} disabled={!validity}>
              Send
            </Button>
          </div>
        </form>

i tried increasing width and height but in invisible div kept growing without any text or input

0

There are 0 best solutions below