如何为mui-select和mui-datepicker组件添加关闭按钮

以下是两个组件的可落地实现方式，兼容MUI v5、v6版本：

MUI Select 实现方案 #

核心逻辑是通过MenuProps自定义下拉菜单内容，在菜单项顶部插入关闭按钮：

• 受控管理Select的展开/收起状态，用open、onOpen、onClose三个属性绑定状态
• 覆盖MenuProps的children属性，在原有菜单项上方新增关闭按钮区域，点击按钮时调用状态更新方法关闭下拉
• 关闭按钮的点击事件需要加event.stopPropagation()，避免触发下拉菜单的默认点击逻辑

参考实现代码：

import { Select, MenuItem, IconButton, Box } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { useState } from 'react'

function CustomSelect() {
  const [value, setValue] = useState('')
  const [open, setOpen] = useState(false)

  return (
    <Select
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      MenuProps={{
        PaperProps: {
          sx: { paddingTop: 1 }
        },
        children: (
          <Box>
            {/* 关闭按钮区域 */}
            <Box sx={{ display: 'flex', justifyContent: 'flex-end', paddingX: 1 }}>
              <IconButton
                size="small"
                onClick={(e) => {
                  e.stopPropagation()
                  setOpen(false)
                }}
              >
                <CloseIcon fontSize="small" />
              </IconButton>
            </Box>
            {/* 原有菜单项 */}
            <MenuItem value="option1">选项1</MenuItem>
            <MenuItem value="option2">选项2</MenuItem>
            <MenuItem value="option3">选项3</MenuItem>
          </Box>
        )
      }}
    />
  )
}

MUI DatePicker 实现方案 #

核心逻辑是利用MUI X DatePicker提供的slotProps插槽，在操作栏注入关闭按钮：

• 受控管理日期选择器的展开/收起状态，绑定open、onOpen、onClose属性
• 通过slotProps.actionBar属性自定义操作栏内容，在原有操作按钮旁新增关闭按钮，点击触发关闭逻辑

参考实现代码：

import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import { IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import { useState } from 'react'

function CustomDatePicker() {
  const [value, setValue] = useState(null)
  const [open, setOpen] = useState(false)

  return (
    <DatePicker
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      value={value}
      onChange={(newValue) => setValue(newValue)}
      slotProps={{
        actionBar: {
          // 保留官方默认的操作按钮，可按需增删
          actions: ['clear', 'today', 'accept'],
          // 注入自定义关闭按钮
          children: (
            <IconButton
              size="small"
              onClick={() => setOpen(false)}
              sx={{ marginLeft: 'auto' }}
            >
              <CloseIcon />
            </IconButton>
          )
        }
      }}
    />
  )
}

两种实现都没有侵入组件底层逻辑，完全基于MUI官方暴露的属性和插槽实现，不会影响组件原有功能的正常使用。

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