材质UI选择菜单水平显示而不是垂直显示

Question

我有一个Material-UI Box，里面有2个组件:一个TextField，它作为一个选择与菜单项创建的菜单，和一个按钮在这个TextField下面，删除选中的内容。问题是，如果不放置按钮，Select组件的菜单确实垂直显示正确，但是在该组件下方添加按钮会导致菜单水平显示。

选择不带按钮

选择按钮带按钮的布局

<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个按钮重复此操作，并且仅添加一个按钮，所有选择菜单更改为垂直。

是否有一种方法可以垂直显示选择菜单，使其位于按钮上方?

Answer 1

您是只从@mui/material/package导入组件还是同时使用material和core package ?

如果你试图从核心包中导入一些，从材料包中导入一些，它们会相互扭曲。我有一个非常类似的问题，我解决了它导入所有的(框，按钮和TextField)从mui材料包和取出核心包。

Answer 2

必须是新旧MUI包版本冲突。尽量一次只使用一个版本。我推荐使用@mui/material