Сетка пользовательского интерфейса Material: требуется пространство между кнопками на более широких экранах

#javascript #reactjs #material-ui #grid-layout

#javascript #reactjs #материал-пользовательский интерфейс #сетка-макет

Вопрос:

У меня очень простой макет, который мне нужен, чтобы две кнопки располагались рядом на широких экранах. Однако мне нужно, чтобы между ними было около 10 пикселей, добавление поля, к сожалению, отодвигает кнопки в сторону. Я бы подумал, что добавление justify='space-between решит эту проблему, но это ничего не дает.

Вот как выглядит мой код:

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

Вот как выглядят результаты этого:

В любом случае, как я могу добавить около 10 пикселей между ними, не отталкивая их от 10 пикселей?

Ответ №1:

Вы можете установить интервал в своем родительском контейнере:

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

Это должно добавить расстояние между всеми дочерними элементами. Хотя он применяет интервал, кратный 8px. Поэтому, если вам нужно ровно 10 пикселей, вам придется переопределить это свойство в пользовательской теме.

Вот документация по spacing реквизиту:

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