如何修复 Material-UI Select w/ MenuItem （其中 MenuItem 水平呈现）？

Question

我一直在使用 React/Next.js 来使用 Material-UI，并且遇到了一个奇怪且持续存在的错误。我无法<Select>渲染常规的垂直下拉菜单。如何让<MenuItem>s 垂直渲染？

我搜索了文档但找不到任何东西。还值得注意的是，我的代码与示例几乎相同：

render (
    <div>
        <FormControl
            fullWidth
            style={{
            paddingBottom: formError
                ? `${paddingBeneathFormControls}px`
                : `${paddingBeneathFormControls + 22}px`,
            }}
        >
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
            className="test"
            labelId="demo-simple-select-label"
            label="Age"
            value={10}
            >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            {formError && (
            <FormHelperText error>
                Please enter a valid value.
            </FormHelperText>
            )}
        </FormControl>
    </div>
)

Answer 1

对于其他人来说可能会有一些意想不到的副作用，但我找到了解决我的问题的方法。我正在使用@mui/material库，我认为这是更现代的版本 - 他们说 NASA、Netflix、Spotify 和其他人都使用这个库。我只是将导入更改为@material-ui/core，它公开了我正在使用的相同元素（Select, MenuItem, FormControl, FormHelperText, InputLabel, TextField）。我不完全确定这两个库的不同之处，但就我而言，只需切换即可使我的所有代码正常工作。

值得注意的是，使用两者会增加一些冲突的样式行为 - 我最初尝试仅借用Select和MenuItem组件@material-ui/core，但当我导入该库时，它破坏了组件的组件样式@mui/material。