显示 textField 错误消息时，Material UI 按钮向下移动答案

【问题标题】：Material UI button moves down when textField error message shown显示 textField 错误消息时，Material UI 按钮向下移动
【发布时间】：2020-03-27 07:10:50
【问题描述】：

我已将材料 ui 错误消息显示添加到我的文本字段中，如果我单击按钮而没有在文本字段上键入任何文本，则会显示错误消息，此消息将按下按钮，我想别这样了，我找不到办法了

这是我的表单代码。

                            <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>

【问题讨论】：

为了帮助您，请发布您的整个代码。 errorState 如何设置和一切

标签： css reactjs material-ui

【解决方案1】：

在您的主题中，添加这些规则，以便 helperText / 错误文本保持在您字段的边缘。这将防止文本下压下面的内容。

const theme = createTheme({
  // ...
  MuiFormHelperText: {
    root: {
      // Use existing space / prevents shifting content below field
      marginTop: 0,
      height: 0,
    },
  }
})

【讨论】：

height: 0 道具确实帮助了我，谢谢。