如何在MUI DataGrid自定义工具栏中使用QuickFilter属性？

当你使用自定义工具栏替代默认GridToolbar时，原slotProps中的showQuickFilter属性不再生效——该属性仅针对默认工具栏组件设计。要在自定义工具栏中保留快速筛选功能，需手动引入并添加GridToolbarQuickFilter组件：

1. 导入所需组件 #

确保已导入GridToolbarQuickFilter：

import { 
  GridToolbarContainer,
  GridToolbarColumnsButton,
  GridToolbarFilterButton,
  GridToolbarDensitySelector,
  GridToolbarExport,
  GridToolbarQuickFilter // 新增导入该组件
} from '@mui/x-data-grid';

2. 修改自定义工具栏配置 #

在自定义工具栏的JSX结构中加入GridToolbarQuickFilter组件：

slots={{
  toolbar: () => (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
      <GridToolbarQuickFilter /> {/* 添加快速筛选栏 */}
    </GridToolbarContainer>
  )
}}

可选：自定义快速筛选行为 #

若需调整快速筛选的样式或功能，可直接向GridToolbarQuickFilter传递props，比如自定义占位文本：

<GridToolbarQuickFilter placeholder="输入关键词搜索..." />

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