Reactjs 如何对齐多个不同的材质UI选择组件？

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

如何使这些组件具有相同的样式，以便它们彼此相邻排列

这是我用于按钮的代码，该按钮与其他组件不在同一行请参见图像：

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>

这是我用于按钮的代码，这些按钮位于另一个屏幕图像的一行：

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>

我的组件现在如下所示：请参见图

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

您已经导入了元素，但没有使用它。为什么不呢？将要对齐的项目环绕到元素中，并传递“对齐”、“对齐项目”和“方向”属性。将垂直和水平对齐项目的示例代码段：

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

---

在将网格添加到代码中并对宽度和高度进行了一些调整之后，我仍然无法使左侧的组件与其他组件对齐。你知道怎么解决这个问题吗？我用我当前的代码更新了这个问题。将所有项目包装到一个对象中可能会有所帮助。