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

Question

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

到目前为止，这可以解决问题:

<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 添加到标签中，但我不确定使用这些组件将其放在哪里。

Answer 1

将 style 添加到 TextField 的 props 中:

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

或者， TextField 使用 className Prop 为您添加类到组件并设置这些类的样式。