How to add padding between label and control on FormControlLabel

Question

I'm trying to have an inline form, where the label is left to the control which doesn't seem to be default usage of various form components.

So far this does the trick:

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

But there is no space at all between the label and the control.

Here's what it looks like

I assume some padding-right has to be added to the label, but I'm not sure where I would put that using these components.

Answer 1

Add style to the props of 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>

Alternatively, TextField takes a className prop for you to add classes to the components and style those classes.