Блог

Я использую пользовательский интерфейс Material в приложении react. Я использую карточки компонентов пользовательского интерфейса Material и получаю некоторые нежелательные результаты. Я получаю пустое место на правом краю страницы. Я надеюсь создать промежутки между «соседними» картами. Для этого я реализовал следующий код:

     <div>
        <Grid container spacing={10} justify="center">
            <Grid item xs={12}>
                <Card>
                    <CardContent>
                      ...
                    </CardContent>
                </Card>
            </Grid>
            <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
             <Grid item xs={12} lg={6}>
                <Card>
                    <CardContent>
                        ...
                    </CardContent>
                </Card>
            </Grid>
        </Grid>
    </div>
 

Это позволяет получить желаемое расстояние между картами и между ними. Однако это также добавляет пробел в правую часть страницы. Так что теперь страница может прокручиваться по горизонтали. Когда я удаляю spacing={10} аргумент, этого пространства больше нет. Есть ли способ получить лучшее из обоих миров и расстояние между картами, не выталкивая отступы за край экрана?

С удовольствием выслушаю любые идеи! Спасибо!

Такое поведение является известным ограничением для Material-UI. У вас есть два варианта:

1. Полностью устраните пробелы и используйте свой собственный CSS
2. Примените отступ к родительскому div. Например:

     <div style={{ padding: 30 }} >
        <Grid container spacing={10} justify="center">
            .....
        </Grid>
    </div>
 

ДЕМОНСТРАЦИЯ

Вы можете прочитать больше об этом в документации по материалу-пользовательскому интерфейсу: https://material-ui.com/components/grid/#negative-margin