reactjs - 如何修复 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 的组件样式组件。