如何修改MUI X Data Grid组件的默认显示文本？

完全可以实现，@mui/x-data-grid 原生支持自定义所有默认展示文本，和RTL配置完全兼容，不会产生冲突，你可以通过以下两种方式修改：

实现方式1：局部组件单独配置 #

适合只需要修改单个数据网格文本的场景，直接给 DataGrid/DataGridPro 组件传入 localeText 属性，覆盖对应字段即可。你需要修改的「Rows per page」对应的字段为 footerRowsPerPage，示例代码如下：

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

const CustomDataGrid = () => {
  return (
    <DataGrid
      // 此处保留你原有的rows、columns、RTL等配置
      localeText={{
        footerRowsPerPage: '替换为你的母语对应文案',
        // 也可同时覆盖其他默认文本，示例如下：
        noRowsLabel: '暂无数据',
        footerRowSelected: (count) => `已选择 ${count} 行`,
      }}
    />
  );
};

如果需要修改其他位置的默认文本，可查询官方文档中Locale Text章节的全量可覆盖字段列表。

实现方式2：全局统一配置 #

适合项目中多处使用数据网格，需要统一修改所有文本的场景。你可以借助MUI的主题能力全局配置语言包，官方已经预制了数十种主流语言的官方语言包，可直接导入对应语言的包使用，无需逐个字段自定义，示例如下：

import { createTheme, ThemeProvider } from '@mui/material/styles';
// 导入对应语言的预制包，示例为适配RTL场景的希伯来语包
import { heIL } from '@mui/x-data-grid';

const theme = createTheme({}, heIL);

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* 项目所有内容，内部所有DataGrid都会自动应用对应语言的默认文案 */}
    </ThemeProvider>
  );
};

如果官方预制的语言包有个别字段不符合你的使用习惯，也可以在主题配置中叠加自定义的localeText字段覆盖对应内容。

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