如何自定义MUI DataGrid Pro中GridFilterMenuItem的显示文本？

有两种常用方法可以修改GridFilterMenuItem默认的“FILTER”文本：

方法一：全局统一修改（通过localeText配置） #

在DataGrid Pro的props中配置localeText，覆盖筛选相关的文本，所有列的筛选菜单文本会同步更新：

import { DataGridPro } from '@mui/x-data-grid-pro';

const customLocaleText = {
  filter: '自定义筛选', // 替换默认的"FILTER"文本
};

function MyDataGrid() {
  return (
    <DataGridPro
      localeText={customLocaleText}
      // 其他DataGrid配置项
    />
  );
}

方法二：单列个性化修改（通过renderMenuItemContent） #

如果仅需修改特定列的筛选菜单文本，可在GridFilterMenuItem中使用renderMenuItemContent属性自定义内容：

<GridColumnMenuContainer
  {...other}
  currentColumn={apiRef.current.getColumn(headerName)}
  onClick={apiRef.current.hideColumnMenu}
  open
>
  <GridFilterMenuItem
    onClick={apiRef.current.hideColumnMenu}
    column={apiRef.current.getColumn(headerName)}
    renderMenuItemContent={() => (
      <span>自定义筛选</span> // 此处替换为你需要的文本
    )}
  />
</GridColumnMenuContainer>

补充说明 #

• 方法一适合全局统一风格的场景，维护成本更低；
• 方法二适合针对特定列做差异化定制，灵活性更强。

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