如何固定HTML元素宽度？解决表单错误消息导致的宽度拉伸问题

问题描述 #

我开发了一个用户注册表单，使用Material UI和react-hook-form实现，当输入字段验证不通过时会展示错误消息，但错误消息显示后，所有元素的宽度都会变大。经排查，问题出在以下错误消息渲染代码：

{errors.name && <p>{errors.name.message}</p>}
{errors.email && <p>{errors.email.message}</p>}
{errors.password && <p>{errors.password.message}</p>}

错误出现前后的界面：

• 错误出现前：
• 错误出现后：

完整表单代码如下：

return (
    <Box
        sx={{
            marginTop: 8,
            display: "flex",
            flexDirection: "column",
            alignItems: "center"
        }}>
        <Typography
            variant="h2"
            sx={{
                color: theme.palette.text.primary,
                fontWeight: "bold"
            }}
        >
            {Constants.Create.REGISTER_HEADER}
        </Typography>
        <Typography
            variant="h4"
            sx={{
                color: theme.palette.text.secondary
            }}
        >
            {Constants.Create.REGISTER_SUBHEADER}
        </Typography>
        <Box component="form" noValidate onSubmit={handleSubmit(onSubmit)} sx={{ mt: 2 }}>
            <Grid container spacing={1}>
                <Grid item xs={12}>
                    <Typography
                        variant="subtitle1"
                        sx={{
                            color: theme.palette.text.secondary
                        }}
                    >
                        {Constants.Create.NAME_HEADER}
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <Controller
                        name="name"
                        control={control}
                        render={({ field }) => (<TextField
                            {...field}
                            margin="normal"
                            required
                            fullWidth
                            id="name"
                            label="Required"
                            variant="filled"
                            size="small"
                            sx={{
                                marginTop: "0px"
                            }}
                        />
                        )}
                    />
                    {errors.name && <p>{errors.name.message}</p>}
                </Grid>
                <Grid item xs={12}>
                    <Typography
                        variant="subtitle1"
                        sx={{
                            color: theme.palette.text.secondary
                        }}
                    >
                        {Constants.Create.EMAIL_HEADER}
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <Controller
                        name="email"
                        control={control}
                        render={({ field }) => (<TextField
                            {...field}
                            margin="normal"
                            required
                            fullWidth
                            id="email"
                            label="Required"
                            variant="filled"
                            size="small"
                            sx={{
                                marginTop: "0px"
                            }}
                        />
                        )}
                    />
                    {errors.email && <p>{errors.email.message}</p>}
                </Grid>
                <Grid item xs={12}>
                    <Typography
                        variant="subtitle1"
                        sx={{
                            color: theme.palette.text.secondary
                        }}
                    >
                        {Constants.Create.PASSWORD_HEADER}
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <Controller
                        name="password"
                        control={control}
                        render={({ field }) => (<TextField
                            {...field}
                            type="password"
                            margin="normal"
                            required
                            fullWidth
                            id="password"
                            label="Required"
                            variant="filled"
                            size="small"
                            sx={{
                                marginTop: "0px"
                            }}
                        />
                        )}
                    />
                    <Box>
                        {errors.password && <p>{errors.password.message}</p>}
                    </Box>
                </Grid>
                <Grid item xs={12}>
                    <FormControlLabel
                    ...
                    />
                </Grid>
            </Grid>
            <Button
                type="submit"
                fullWidth
                variant="contained"
                size="large"
                sx={{ mt: 2, mb: 2 }}
            >
                {Constants.Create.CREATE_ACCOUNT}
            </Button>
        </Box>
    </Box >
)

解决方案 #

方法1：限制错误消息容器宽度 #

给渲染错误消息的<p>标签添加宽度样式，让它继承父容器（Grid item）的宽度，避免错误消息撑大容器：

{errors.name && <p sx={{ width: '100%', mt: 0.5, color: theme.palette.error.main }}>{errors.name.message}</p>}

方法2：固定表单整体宽度 #

给外层的form容器设置最大宽度和100%宽度，限制表单整体尺寸，防止元素被拉伸：

<Box component="form" noValidate onSubmit={handleSubmit(onSubmit)} sx={{ mt: 2, maxWidth: '600px', width: '100%' }}>

方法3：使用Material UI内置错误提示（推荐） #

Material UI的TextField本身支持错误状态和内置提示，结合react-hook-form的fieldState可以优雅解决问题，同时遵循组件设计规范：

<Controller
    name="name"
    control={control}
    render={({ field, fieldState: { error } }) => (
        <TextField
            {...field}
            margin="normal"
            required
            fullWidth
            id="name"
            label="Required"
            variant="filled"
            size="small"
            sx={{ marginTop: "0px" }}
            error={!!error}
            helperText={error?.message}
        />
    )}
/>

这种方式下错误消息由TextField内部布局控制，不会导致容器宽度变化。

内容的提问来源于stack exchange，提问作者code_learner93