Javascript 反应材质ui文本字段屏幕抖动

我有一个简单的代码。有一个物料ui文本字段

当我在文本框中单击以输入数据时，屏幕会抖动。输入完数据后，我点击外部，框，屏幕震动。请帮助我解决此屏幕抖动问题。非常感谢

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {

    return (
        <div>
            <Grid container spacing={2} justify="center">

                <Grid item xs={12} container justify="center" spacing={2}>
                    <Grid item xs={3}>
                        <TextField
                            label="fd"
                            variant="outlined"
                            fullWidth
                        >
                        </TextField>
                    </Grid>
                </Grid>
            </Grid>

        </div>
    )
}

export default Login;

从“@material ui/core/Grid”导入网格；
从“@material ui/core/TextField”导入TextField；
从“道具类型”导入道具类型；
从“React”导入React，{useState}；
const Login=props=>{
返回(
)
}
导出默认登录；

只需设置

onChange

文本字段的属性，如下所示，震动就会消失

import React，{useState}来自“React”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/TextField”导入TextField；
从“道具类型”导入道具类型；
从“React”导入React，{useState}；
const Login=props=>{
const[name，setName]=useState（“”）
返回(
setName（e.target.value）}
/>
)
}
导出默认登录；

您能制作一个代码笔吗？