如何修复 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）。我不完全确定这两个库的不同之处，但在我的情况下，只需切换即可使我的所有代码正常工作。

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