reactjs - How create a space between elements (5px)?

Question

I have two grids i want to create spacing beetween elements, the space must be 5px horizontally, i have use the spacing={5} but not worked

<Grid container direction={'row'} spacing={5}>
    <Grid item xs={12}>
        <FormControl
            className={classes.formControl}
            fullWidth
        >
            <InputLabel id="issue-label">Issue</InputLabel>
            <Select
                className={classes.select}
                id="issue"
                onChange={handleIssue}
            >
                <MenuItem value="" disabled>
                   Please select
                </MenuItem>
                ))}
            </Select>
        </FormControl>
    </Grid>
    <Grid item xs={12}>
        <TextField
            fullWidth={true}
            multiline
        />
    </Grid>
</Grid>

Answer 1

According to the Grid component documentation page, the number in the spacing prop is multiplied by 8px. So spacing={5} means that the gap between two items is actually 40px.

Replace the spacing prop with style={{ gap: 5 }}. This should set the flexbox gap between items to 5px.