Material UI Grid: need space in between buttons on wider screens

Question

I have a very simple layout which I need to have two buttons side by side on wides screens. However I need them to have about 10px in between them, adding a margin unfortunately pushes the buttons to the side. I would think adding justify='space-between would solve it, but it does nothing.

This is what my code looks like:

const MyComponent = () => (
    <div style={{ width: 500 }}>
        <div style={{ width: '100%' }}>
            <Grid container justify='space-between'>
                <Grid item xl={6} lg={6} md={6} sm={12} xs={12}>
                    <Button variant='contained'>
                        Left Side Button
                    </Button>
                </Grid>
                <Grid item xl={6} lg={6} md={6} sm={12} xs={12}>
                    <Button variant='contained'>
                        Right Side Button
                    </Button>
                </Grid>
            </Grid>
        </div>
    </div>
)

This is what the results of that look like:

Anyway, how can I add about 10px in between them without having them pushed off 10px as well?

Answer 1

You can set the spacing prop on your parent container:

<Grid container spacing={2} justify='space-between'>

That should add spacing between all of the children elements. Though it applies spacing in multiples of 8px. So if you need exactly 10px you'd have to override that property in a custom theme.

Here is the documentation on the spacing prop:

https://material-ui.com/components/grid/#spacing