Кнопка пользовательского интерфейса материала перемещается вниз, когда отображается сообщение об ошибке textField

Question

Я добавил отображение сообщения об ошибке в пользовательском интерфейсе материала в свое текстовое поле. Если я нажму на кнопку без текста, набранного в текстовом поле, появится сообщение об ошибке, это сообщение будет нажимать кнопку sh вниз, Я хочу это остановить, я не могу найти способ сделать это

Это мой код формы.

                            <Grid container  justify='center' alignContent='center'  >
                                <Grid item xs={12}   >

                                    <TextField

                                        id="outlined-full-width"
                                        label="Input"
                                        style={{  width:'100%',marginTop:30 }}
                                        placeholder="Add A Todo Item "

                                        margin="normal"

                                        InputLabelProps={{
                                            shrink: true,
                                        }}

                                        error={this.state.errorState }
                                        helperText={
                                            this.state.errorState && "Item name can't be blank"


                                        }
                                        size="large"
                                        variant="outlined"
                                        value={newItem}
                                        onChange={handleInput}




                                    />

                                </Grid>

                            </Grid>
                            <CardActions>
                            <Grid container  justify='center' alignContent='center'  >
                                <Grid item xs={12} md={6}  >

                                  <Button
                    type="submit"
                    variant="contained"
                    color='inherit'
                    fontsize='inherit'
                    style={styles.add}
                    startIcon={<AddIcon/>}

                >
                    Add Item
                </Button>

                                </Grid>

                            </Grid>

                            </CardActions>




                            </form>

Answer 1

В соответствии с документами для материала вам необходимо поместить обработку ошибок в отдельное текстовое поле для вывода ошибки.

 <TextField error id="standard-error" label="Error" defaultValue="Hello World" />
        <TextField
          error
          id="standard-error-helper-text"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
        />