如何修改React MaterialUI DataGrid排序图标悬浮时的tooltip提示文本

有两种常用的实现方式，第一种是官方推荐的最简单的全局/批量配置方案，第二种适合单列自定义的场景：

方案1：通过localeText属性覆盖内置文本（推荐） #

Material UI DataGrid 所有默认展示的内置文本都可以通过localeText属性自定义修改，排序图标悬浮提示对应的三个配置项分别是sortAscending（升序提示）、sortDescending（降序提示）、cancelSort（取消排序提示）。

单个DataGrid局部生效示例 #

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

// 自定义排序提示文本，可替换为任意需要的语言内容
const customLocaleText = {
  sortAscending: '按升序排列',
  sortDescending: '按降序排列',
  cancelSort: '取消排序'
};

function CustomDataGrid() {
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        rows={你的表格数据}
        columns={你的列配置}
        localeText={customLocaleText}
        {/* 其余DataGrid配置项 */}
      />
    </div>
  );
}

全局所有DataGrid统一生效示例 #

如果需要项目内所有DataGrid都使用相同的自定义文本，可以在主题配置中统一设置：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { DataGrid } from '@mui/x-data-grid';

const theme = createTheme({
  components: {
    MuiDataGrid: {
      defaultProps: {
        localeText: {
          sortAscending: '升序排列',
          sortDescending: '降序排列',
          cancelSort: '取消排序'
        }
      }
    }
  }
});

// 项目根组件包裹
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 项目内所有子组件的DataGrid都会继承该配置 */}
      <你的项目组件 />
    </ThemeProvider>
  );
}

方案2：自定义列头实现单列特殊配置 #

如果只需要修改某一列的排序提示，不需要全局统一修改，可以自定义列的renderHeader方法：

const columns = [
  {
    field: 'username',
    headerName: '用户名',
    sortable: true,
    renderHeader: (params) => (
      <Tooltip title="自定义该列的排序提示">
        <span>{params.colDef.headerName}</span>
      </Tooltip>
    )
  },
  // 其余列配置
];

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