Material UI Select 菜单水平显示而不是垂直显示答案

【问题标题】：Material UI Select menu displays horizontally instead of verticallyMaterial UI Select 菜单水平显示而不是垂直显示
【发布时间】：2022-06-16 19:37:14
【问题描述】：

我有一个 Material-UI 框，里面有 2 个组件：一个作为 Select 的 TextField，它带有一个使用 MenuItems 创建的菜单，以及这个 TextField 下方的一个按钮，用于删除选择中的选定内容。问题是在不放置按钮的情况下，Select 组件的菜单确实垂直显示正确，但是在该组件下方添加按钮会导致菜单水平显示。

Select without button

Select with button Layout with button

<Box sx={{ position: "absolute", top: "57%", left: "13%", width: "11%" }}>
<TextField
    select
    variant="outlined"
    label="Bebida 1"
    fullWidth
    name="pos1"
    value={cocktails.pos1}
    onChange={handleSelectChange}
    SelectProps={{
        MenuProps: {
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            },
            getContentAnchorEl: null
        }
    }}
>

    {allDrinks.map(drink => (
        <MenuItem key={drink} value={drink}>{drink}</MenuItem>
    ))}
</TextField>

{cocktails.pos1 !== "" &&
    <Box sx={{ position: "absolute", left: "30%", alignItems: "center", align: "center" }}>
        <IconButton color="secondary" aria-label="Eliminar bebida"
            onClick={(e) => {
                e.preventDefault();
                handleRemove('remove_pos1')
            }}
        >
            <Icon style={{ fontSize: "2vw" }}>highlight_off</Icon>
        </IconButton>
    </Box>
}

我用 6 个选择组件和 6 个按钮重复此操作，并且只添加一个按钮，所有选择菜单都变为垂直。

有没有办法垂直显示“选择”菜单，使其位于按钮上方？

【问题讨论】：

标签： reactjs web material-ui

【解决方案1】：

您是仅从 @mui/material/ 包中导入组件还是同时使用材料和核心包？

如果您尝试从核心包中导入其中一些，从材料包中导入其中一些，它们会相互扭曲。我有一个非常相似的问题，我解决了它从mui材料包中导入所有它们（Box，Button和TextField）并取出核心包。

【讨论】：