如何修改GridToolbarColumnsButton组件的显示文本与图标

你使用的是MUI X DataGrid组件的内置工具栏按钮，修改GridToolbarColumnsButton的文本和图标有两种成熟可用方案：

方案1：通过localeText属性修改显示文本 #

如果只需要改文本不需要改图标，直接在DataGrid的全局配置里覆盖对应国际化字段即可，不需要调整工具栏的按钮代码：

import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton, GridToolbarFilterButton } from '@mui/x-data-grid';

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
    </GridToolbarContainer>
  );
}

function MyTable() {
  return (
    <DataGrid
      // 其他表格配置项
      components={{ Toolbar: CustomToolbar }}
      localeText={{
        toolbarColumns: "自定义列管理" // 替换为你想要的按钮文本
      }}
    />
  )
}

方案2：自定义按钮复用内置逻辑（同步修改图标+文本） #

如果需要同时调整图标、文本甚至按钮样式，直接自己实现按钮调用内置的列面板逻辑即可，灵活度更高，不受内置组件属性限制：

import { Button } from '@mui/material';
// 可以替换为任意你想要的图标组件
import CustomColumnIcon from '@mui/icons-material/ViewColumn';
import { useGridApiContext, GridToolbarContainer, GridToolbarFilterButton } from '@mui/x-data-grid';

// 自定义列选择按钮
function CustomColumnsBtn() {
  const gridApi = useGridApiContext();
  const openColumnPanel = () => {
    // 调用DataGrid内置的打开列配置面板方法
    gridApi.current.showColumnsPanel();
  };

  return (
    <Button
      startIcon={<CustomColumnIcon />}
      onClick={openColumnPanel}
      size="small"
      // 还可以自定义className、color等所有Button支持的属性
    >
      自定义列管理
    </Button>
  )
}

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <CustomColumnsBtn />
      <GridToolbarFilterButton />
    </GridToolbarContainer>
  );
}

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