如何禁用或重命名GridToolbarFilterButton的Tooltip提示

MUI X DataGrid 的工具栏按钮支持通过插槽属性透传、本地化配置两种方式修改Tooltip，不需要侵入修改组件内部源码，具体实现如下：

重命名Tooltip提示内容 #

有两种常用实现方式，按需选择即可：

• 单按钮自定义：在自定义工具栏内使用GridToolbarFilterButton时，通过slotProps透传Tooltip的标题属性

  import { DataGrid, GridToolbarContainer, GridToolbarFilterButton } from '@mui/x-data-grid';
  
  const CustomToolbar = () => {
    return (
      <GridToolbarContainer>
        <GridToolbarFilterButton
          slotProps={{
            tooltip: { title: "你需要的自定义提示文本" }
          }}
        />
        {/* 其余工具栏按钮按业务需求添加即可 */}
      </GridToolbarContainer>
    )
  }
  
  export default function BusinessTable() {
    return (
      <DataGrid
        {/* 行、列等基础配置 */}
        slots={{ toolbar: CustomToolbar }}
      />
    )
  }
  

• 全局统一修改：如果项目内所有表格的筛选按钮都需要改提示文本，直接给DataGrid传本地化配置即可，不需要逐个改按钮

  <DataGrid
    {/* 其余配置 */}
    localeText={{ filterPanelLabel: "全局统一的筛选提示文本" }}
  />
  

禁用Tooltip #

直接给Tooltip插槽传入禁用属性即可，也可以通过将提示文本置空实现无提示效果：

<GridToolbarFilterButton
  slotProps={{
    tooltip: { 
      disabled: true // 直接禁用Tooltip
      // 若不想禁用组件仅需要不显示提示，也可以写 title: ""
    }
  }}
/>

版本适配提示：如果你使用的是5.x及更低版本的MUI X DataGrid，将上述代码中的slotProps替换为componentsProps即可，属性配置逻辑完全一致。

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