代码之家 › 专栏 › 技术社区 › Francis Ducharme

如何在FormControlLabel的标签和控件之间添加填充

material-ui reactjs

Francis Ducharme · 技术社区 · 4 年前

我试图有一个内联表单,其中标签留给控件,这似乎不是各种表单组件的默认用法。

到目前为止,这已经奏效了:

<Grid container spacing={0}>
    <Grid item xs={12}>
        <FormControlLabel
            label="ID"
            disabled
            value="42a5936e-9856-42d4-b540-104fd79bcf36"
            labelPlacement="start"
            control={
                <TextField fullWidth name="ID" />
            }
        />
    </Grid>
</Grid>

但标签和控件之间根本没有空间。

这是它的样子

我想有些 padding-right 必须添加到标签中,但我不确定使用这些组件会把它放在哪里。

3 回复 | 直到 4 年前

twharmon 4 年前

添加 style 到道具 TextField :

<Grid container spacing={0}>
    <Grid item xs={12}>
        <FormControlLabel
            label="ID"
            disabled
            value="42a5936e-9856-42d4-b540-104fd79bcf36"
            labelPlacement="start"
            control={
                <TextField
                    fullWidth
                    name="ID"
                    style={{ paddingLeft: '20px' }}
                />
            }
        />
    </Grid>
</Grid>

或者, 文本字段 需要a className prop,用于向组件添加类并设置这些类的样式。

keikai 4 年前

要自定义文本字段输入区域填充,请执行以下操作:

使用MUI nesting selector 类名称 MuiInputBase根目录

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiInputBase-root": {
      paddingLeft: 10
    }
  }
}));

const classes = useStyles();

control={<TextField fullWidth name="ID" className={classes.root} />}

用于内联风格

Karthick Vinod 4 年前

这对你有用吗?

<TextField
   value="42a5936e-9856-42d4-b540-104fd79bcf36"
   fullWidth
   InputProps={{
     startAdornment: (<InputAdornment position="start">ID</InputAdornment>)
   }}
/>

推荐文章