如何在MUI Autocomplete下方添加固定显示的Accept和Cancel按钮

要实现按钮随弹出框一同显示在选项列表下方的需求，核心是利用Autocomplete的renderPaper属性自定义弹出框的内部结构，把选项列表和按钮组件整合到同一个弹出Paper中。

关键实现要点 #

• 通过renderPaper接管弹出框的Paper内容，将原选项列表（children）与按钮容器组合为垂直布局
• 保留原有ListboxProps配置，维持选项列表的高度限制

修改后的完整代码 #

import "./styles.css";
import { Autocomplete } from "@mui/lab";
import TextField from "@mui/material/TextField";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";

export default function App() {
  return (
    <div className="App">
      <Paper sx={{ padding: 1 }}>
        <Autocomplete
          freeSolo
          options={["one", "two", "three", "four"]}
          renderInput={(params) => <TextField {...params} />}
          ListboxProps={{ sx: { height: 100, overflowY: "auto" } }}
          // 自定义弹出框的Paper内部结构
          renderPaper={(props, children) => (
            <Paper {...props}>
              <Box sx={{ display: "flex", flexDirection: "column" }}>
                {/* 原选项列表 */}
                {children}
                {/* 按钮容器 */}
                <Box sx={{ display: "flex", justifyContent: "flex-end", p: 1 }}>
                  <Chip label="Accept" sx={{ margin: 1 }} />
                  <Chip label="Cancel" sx={{ margin: 1 }} />
                </Box>
              </Box>
            </Paper>
          )}
        />
      </Paper>
    </div>
  );
}

代码说明 #

• renderPaper接收两个参数：props是Paper组件的默认属性，需原样传递以保证基础样式与行为；children是Autocomplete生成的选项列表（Listbox）
• 用垂直方向的Flex布局组合列表与按钮，按钮容器设置justifyContent: "flex-end"实现靠右对齐（可根据需求调整布局）
• 给Listbox添加overflowY: "auto"，当选项数量超出显示范围时自动出现滚动条，维持列表高度固定

内容的提问来源于stack exchange，提问作者GRZa