下拉位置选择材料用户界面

Question

我使用的选择从材料用户界面，但我面临的问题，下拉不是在一个位置。

如何我想要它：

​

​

它在我身上的表现：

打开下拉列表时的

​

​

所以基本上，下拉显示在它的中心区域，而不是在它下面。我做了我的研究，并看到它是已知的默认设置(下拉框低于它的字段)，但在我的情况下没有发生。

下拉的代码

 <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';

对我来说很管用。