reactjs - 使用材质 UI 反应的嵌套网格容器和项目不适合屏幕

Question

我正在尝试制作如下所示的 UI，但由于某些原因，它没有按预期完成。

我也尝试过更改列，但这也不起作用。

问题是我正在使用 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 列的响应式布局系统。这意味着在每个网格容器内 - 您最多可以有 12 个网格项xs={1}， 6 个网格项xs={2}， 4 个网格项，xs={3}依此类推。

你也可以有以上的组合，例如：

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

在您的代码中，项目总和为 20，大于 12（网格支持的列数）。

您可以以不同的方式划分列，或者不使用网格结构（例如，如果这对您更有意义，您可以移至表格）。