如何修改Mui DataGrid工具栏的标签及输入框占位文本？

嗨，我之前也踩过这个坑！直接用sx给标签加css的content属性肯定没用的，因为这些文本是组件内部渲染出来的真实文本节点，不是CSS伪元素生成的内容。正确的做法是用MUI DataGrid提供的localeText配置项来覆盖这些内置文本。

具体操作很简单，你只需要在DataGrid组件上传入自定义的localeText对象，替换对应的键值就行：

• 工具栏里的"Find column"标签对应的键是findColumns
• 输入框的"Column title"占位符对应的键是columnTitle

给你个代码示例参考：

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

function YourDataGridComponent() {
  // 自定义文本配置
  const customLocaleText = {
    findColumns: '查找列', // 替换原来的"Find column"
    columnTitle: '请输入列名', // 替换原来的"Column title"
  };

  return (
    <DataGrid
      // 你的其他配置项，比如rows、columns等
      localeText={customLocaleText}
    />
  );
}

要是你用的是DataGridPro或者DataGridPremium，这个方法也完全适用，因为它们都继承了基础DataGrid的locale配置。如果之后你还想修改其他内置文本，可以去MUI官方文档里找完整的localeText键值列表，按需替换就行。

备注：内容来源于stack exchange，提问作者user11482333