Вложенные сетчатые контейнеры и элементы не помещаются на экране с помощью пользовательского интерфейса материала.

Question

Я пытаюсь создать пользовательский интерфейс, как показано ниже, но по некоторым причинам он не проходит должным образом.

Я также пытался изменить столбцы, но это тоже не сработало.

Проблема в том, что я использую Grid, и он содержит соответствующие элементы и контейнеры, но меняя их, испортите весь дизайн.

Вот мой код:

<React.Fragment>
                <Container maxWidth="xl">
                    <Grid container spacing={1} className="mainBlock">
                        <Grid item xs={12}>
                            <div className="rightBlock liproCard">
                                <Grid container spacing={1} style={{height: '115px'}}>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                    <Grid item sm={2} style={{lineHeight: '2.5'}}>
                                        Jahr
                                    </Grid>
                                    <Grid item sm={3}>
                                        <TextField
                                            select
                                            variant="outlined"
                                            className="select-box"
                                            size="small"
                                            id="year"
                                            value={year}
                                            onChange={(e) => this.yearHandler(e)}>
                                            <MenuItem value={'2016'}>2016</MenuItem>
                                            <MenuItem value={'2017'}>2017</MenuItem>
                                            <MenuItem value={'2018'}>2018</MenuItem>
                                            <MenuItem value={'2019'}>2019</MenuItem>
                                            <MenuItem value={'2020'}>2020</MenuItem>
                                        </TextField>
                                    </Grid>
                                </Grid>

                            </div>
                        </Grid>
                    </Grid>
                </Container>
            </React.Fragment>

Здесь это токовый выход:

Вот требуемый выход:

Answer 1

Сетка контейнера Material-ui - это адаптивная система макетов, основанная на 12 столбцах. Это означает, что внутри каждого Grid-контейнера вы можете иметь максимум 12 элементов сетки с xs={1}, 6 элементов сетки с xs={2}, 4 элемента сетки с xs={3} и т. Д.

вы также может иметь комбинации из вышеперечисленного, например:

|        xs == 6        |  xs == 3  |  xs == 3  | 
  ^ This will get 50%      ^ 25%        ^ 25%

В вашем коде сумма элементов составляет 20, что больше 12 (количество столбцов, поддерживаемых сеткой).

Вы можете разделить столбцы по-разному или не использовать структуру Grid (например, вы можете перейти к таблицам , если это имеет для вас больше смысла).