如何对齐几个不同的 Material UI 选择组件？

Question

我正在尝试在我的应用程序中对齐不同的 Material UI 选择组件。

in the image you can see that the components are not aligned.

我怎样才能给这些组件相同的样式，使它们彼此相邻排列。

这是我用于按钮的代码，它与其他组件不在同一行（见图）：

import React, { useEffect, useState, FunctionComponent, useRef, useCallback } from 'react'
import { Toolbar, Snackbar, Box, Grid, TextField, Select, MenuItem, Button, FormControl, InputLabel, Checkbox, Input, ListItemText } from '@material-ui/core'
import { RouteComponentProps } from '@reach/router'
import { useStyles } from '../Common/Style.css'
import ChartElement from '../Components/Chart'

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250,
        },
    },
};

                            <FormControl className={classes.formControl}>
                            <InputLabel id="demo-mutiple-checkbox-label">kerk</InputLabel>
                            <Select
                                labelId="demo-mutiple-checkbox-label"
                                id="demo-mutiple-checkbox"
                                multiple
                                value={personName}
                                onChange={onChangeKerk}
                                input={<Input />}
                                renderValue={(selected) => (selected as string[]).join(', ')}
                                MenuProps={MenuProps}
                            >
                                {churches.map((name) => (
                                    <MenuItem key={name} value={name}>
                                        <Checkbox checked={personName.indexOf(name) > -1} />
                                        <ListItemText primary={name} />
                                    </MenuItem>
                                ))}
                            </Select>
                        </FormControl>

这是我用于与其他按钮在一行中的代码（见图）：

                            <TextField
                            id="Startdatum"
                            label="Startdatum"
                            onChange={onChangeStartDatum}
                            defaultValue={startDatum}
                            type="date"
                            InputLabelProps={{
                                shrink: true,
                            }}
                        />
                        <TextField
                            id="Einddatum"
                            label="Einddatum"
                            onChange={onChangeEindDatum}
                            defaultValue={eindDatum}
                            type="date"
                            InputLabelProps={{
                                shrink: true,
                            }}
                        />
                        <FormControl className={classes.formControl}>
                            <InputLabel htmlFor="age-native-simple">Maanden</InputLabel>
                            <Select
                            native
                            value={currentOption}
                            onChange={onChangeFixedDate}
                            inputProps={{
                                name: 'age',
                                id: 'age-native-simple',
                            }}
                            >
                            <option value={"All"}>All</option>
                            <option value={"3 months"}>3 months</option>
                            </Select>
                        </FormControl>

将网格添加到代码后更新：

<Grid justify="center" alignItems="center" direction="row">
            <Toolbar className={classes.toolbar}>
                <Grid item lg={6} md={12} xs={12}>
                    <h4 className={classes.title}>{"DASHBOARD"}</h4>
                </Grid>

         
                <Grid item lg={1} md={12} xs={12}>
                    <FormControl className={classes.formControl}>
                        <Select
                            labelId="demo-mutiple-checkbox-label"
                            id="demo-mutiple-checkbox"
                            multiple
                            value={churchName}
                            onChange={onChangeChurch}
                            input={<Input />}
                            renderValue={(selected) => (selected as string[]).join(', ')}
                            MenuProps={MenuProps}
                        >
                            {churches.map((name) => (
                                <MenuItem key={name} value={name}>
                                    <Checkbox checked={churchName.indexOf(name) > -1} />
                                    <ListItemText primary={name} />
                                </MenuItem>
                            ))}
                        </Select>
                    </FormControl>
                </Grid>
                <Grid item lg={12} md={12} xs={10}>
                    <TextField
                        id="Startdatum"
                        label="Startdatum"
                        onChange={onChangeStartDatum}
                        value={startDatum}
                        type="date"
                        InputLabelProps={{
                            shrink: true,
                        }}
                    />
                    <TextField
                        id="Einddatum"
                        label="Einddatum"
                        onChange={onChangeEindDatum}
                        value={eindDatum}
                        type="date"
                        InputLabelProps={{
                            shrink: true,
                        }}
                    />
                </Grid>
                <Grid item lg={8} md={12} xs={12}>
                    <FormControl className={classes.formControl}>
                        <InputLabel htmlFor="age-native-simple">Maanden</InputLabel>
                        <Select
                            native
                            value={currentOption}
                            onChange={onChangeFixedDate}
                            inputProps={{
                                name: 'age',
                                id: 'age-native-simple',
                            }}
                        >
                            <option value={"All"}>All</option>
                            <option value={"3 months"}>3 months</option>
                        </Select>
                    </FormControl>
                </Grid>
                {/*<Button id="refresh" onClick={onClick} variant="contained" color="primary">
                            ↺
                        </Button>*/}
            </Toolbar>
        </Grid>

我的组件现在看起来像这样：（见图）

在对宽度和高度进行了一些调整后，我仍然无法让左侧的组件与其他组件对齐。知道如何解决这个问题吗？

Answer 1

您已导入 <Grid> 元素，但您没有使用它。为什么不？将要对齐的项目包围成<Grid> 元素，并传递justify、alignItems 和direction 属性。示例代码 sn-p 将垂直和水平对齐项目：

<Grid justify="center" alignItems="center" direction="row">
     --- your code and components go here---
</Grid>

<Grid> 元素的完整文档可以在 Material UI 网站上找到：

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

您可以通过将item 属性传递给<Grid> 元素来额外指定每个元素的总相对宽度，相对于不同的视口（大、中和小）：

<Grid item lg={6} md={12} xs={12}>
      --- your code and components go here---
</Grid>