Как добавить отступ между меткой и элементом управления в 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:

<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 проповеди для вас, чтобы добавить классы к компонентам и стилизовать эти классы.

Answer 2

Будет ли это работать для вас?

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

Answer 3

Чтобы настроить заполнение входной зоны текстового поля:

Используйте MUI селектор вложенности для className MuiInputBase- root

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

---

Для встроенного стиля