reactjs 与输入分开显示的TextField标签

ilmyapht  于 2023-01-05  发布在  React
关注(0)|答案(1)|浏览(164)

当前使用material-ui代码时,标签显示在input的左上角,但是如果我想单独显示input之外的标签,我知道我可以使用<InputLabel/>来实现这一点,但是是否有任何替代方法可以只使用<TextField/>来实现。

<TextField
            id="username"
            label={<Typography className={classes.label}>Username</Typography>}
            fullWidth
            margin="normal"
            InputLabelProps={{
              shrink: true,
            }}
            InputProps={{
              classes: { input: classes.inputs },
            }}
            name="username"
            autoComplete="username"
            autoFocus
            helperText={touched.username ? errors.username : ''}
            error={touched.username && Boolean(errors.username)}
            value={values.username}
            variant="outlined"
            onChange={handleChange}
          />
mpgws1up

mpgws1up1#

我使用了GridInputLabel,以便能够通过手动实现标签并定义其位置来制作您想要的内容,我有这样的内容:

<Grid container >
    <Grid item xs={12}>
        <InputLabel
            shrink={false}
            htmlFor={"username"}
        >
            <Typography className={classes.label}>Username</Typography>
        </InputLabel>

     <TextField
            id="username"
            fullWidth
            margin="normal"
            InputLabelProps={{
              shrink: true,
            }}
            InputProps={{
              classes: { input: classes.inputs },
            }}
            name="username"
            autoComplete="username"
            autoFocus
            helperText={touched.username ? errors.username : ''}
            error={touched.username && Boolean(errors.username)}
            value={values.username}
            variant="outlined"
            onChange={handleChange}
          />
    </Grid>
</Grid>

相关问题