下拉列表的位置 select material ui

Question

我正在使用 material UI 中的 select，但我面临的下拉菜单问题并不在一个位置。

我多么想要它：

它在我的中的显示方式：

when opening the dropdown

所以基本上，下拉菜单显示在其字段的中心，而不是显示在其下方。我做了我的研究，发现它是默认设置（下拉菜单低于它的字段）但在我的情况下没有发生。

下拉菜单代码

 <div className="row-5" style={{ marginTop: "21px" }}>
                            <div className="repeat">

                                <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
                                    <InputLabel id="repeat-id">Repeat</InputLabel>
                                    <Select
                                        style={{ width: '420px' }}
                                        labelId="repeat-id"
                                        id="demo-simple-select-standard"
                                        // value={age}
                                        // onChange={handleChange}
                                        label="Repeat"
                                        defaultValue="Never"
                                    >
                                        <MenuItem value="Never">
                                            Never
                                        </MenuItem>
                                        <MenuItem value={10}>Ten</MenuItem>
                                        <MenuItem value={20}>Twenty</MenuItem>
                                        <MenuItem value={30}>Thirty</MenuItem>
                                    </Select>
                                </FormControl>

                            </div>
                        </div>

Answer 1

您必须从此处导入 Select 组件：

    import FormControl from '@mui/material/FormControl';
    import Select from '@mui/material/Select';

非常适合我。