Блог

На изображении показана проблема, с которой я сталкиваюсь

Я даже попытался удалить коды темы внутри поставщика тем. Но все равно не работает. Компонент, в котором я его использую, находится ниже:

 import { useState } from "react";
import {
    Grid,
    TextField,
} from "@mui/material";

const AccountProfileDetails = (props) => {
    const [values, setValues] = useState({
        firstName: "Katarina",
        lastName: "Smith",
        email: "demo@devias.io",
        phone: "",
        state: "Alabama",
        country: "USA",
    });

    const handleChange = (event) => {
        setValues({
            ...values,
            [event.target.name]: event.target.value,
        });
    };
    return (
        <form autoComplete="off" noValidate {...props}>
            <Grid container spacing={3}>
                <Grid item md={6} xs={12}>
                    <TextField
                        fullWidth
                        helperText="Please specify the first name"
                        label="First name"
                        name="firstName"
                        onChange={handleChange}
                        required
                        value={values.firstName}
                        variant="outlined"
                    />
                </Grid>
            </Grid>
        </form>
    );
};

export default AccountProfileDetails;
 

Решил эту проблему. На самом деле, я также установил bootstrap, что и стало причиной проблемы, после удаления bootstrap все работало так, как и должно было быть.