如何自定义GridToolbarButtons文本？移动端需移除按钮文本

方法一：通过媒体查询自定义样式隐藏文本 #

针对每个工具栏按钮，利用CSS媒体查询在移动设备尺寸下隐藏按钮文本，仅保留图标：

import { styled } from '@mui/material/styles';
import GridToolbarColumnsButton from '@mui/x-data-grid/GridToolbarColumnsButton';
import GridToolbarFilterButton from '@mui/x-data-grid/GridToolbarFilterButton';
import GridToolbarDensitySelector from '@mui/x-data-grid/GridToolbarDensitySelector';
import GridToolbarExport from '@mui/x-data-grid/GridToolbarExport';

const StyledColumnsButton = styled(GridToolbarColumnsButton)`
  @media (max-width: 600px) {
    .MuiButton-label span {
      display: none;
    }
  }
`;

const StyledFilterButton = styled(GridToolbarFilterButton)`
  @media (max-width: 600px) {
    .MuiButton-label span {
      display: none;
    }
  }
`;

const StyledDensitySelector = styled(GridToolbarDensitySelector)`
  @media (max-width: 600px) {
    .MuiButton-label span {
      display: none;
    }
  }
`;

const StyledExportButton = styled(GridToolbarExport)`
  @media (max-width: 600px) {
    .MuiButton-label span {
      display: none;
    }
  }
`;

// 替换原组件使用
<StyledColumnsButton />
<StyledFilterButton />
<StyledDensitySelector />
<StyledExportButton />

方法二：动态控制按钮label属性 #

使用MUI的useMediaQuery钩子检测屏幕尺寸，在移动设备下将按钮文本设为空：

import { useMediaQuery, useTheme } from '@mui/material';
import GridToolbarColumnsButton from '@mui/x-data-grid/GridToolbarColumnsButton';
import GridToolbarFilterButton from '@mui/x-data-grid/GridToolbarFilterButton';
import GridToolbarDensitySelector from '@mui/x-data-grid/GridToolbarDensitySelector';
import GridToolbarExport from '@mui/x-data-grid/GridToolbarExport';

const CustomToolbar = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <>
      <GridToolbarColumnsButton label={isMobile ? '' : '列'} />
      <GridToolbarFilterButton label={isMobile ? '' : '筛选'} />
      <GridToolbarDensitySelector label={isMobile ? '' : '密度'} />
      <GridToolbarExport label={isMobile ? '' : '导出'} />
    </>
  );
};

方法三：完全自定义工具栏按钮 #

自行封装按钮组件，仅在桌面端显示文本，配合Tooltip提示功能：

import { useMediaQuery, useTheme, IconButton, Tooltip } from '@mui/material';
import { ColumnsIcon, FilterAltIcon, DensityMediumIcon, DownloadIcon } from '@mui/x-data-grid';

const MobileFriendlyToolbar = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <>
      <Tooltip title="列">
        <IconButton>
          <ColumnsIcon />
          {!isMobile && <span>列</span>}
        </IconButton>
      </Tooltip>
      <Tooltip title="筛选">
        <IconButton>
          <FilterAltIcon />
          {!isMobile && <span>筛选</span>}
        </IconButton>
      </Tooltip>
      <Tooltip title="密度">
        <IconButton>
          <DensityMediumIcon />
          {!isMobile && <span>密度</span>}
        </IconButton>
      </Tooltip>
      <Tooltip title="导出">
        <IconButton>
          <DownloadIcon />
          {!isMobile && <span>导出</span>}
        </IconButton>
      </Tooltip>
    </>
  );
};

注：以上示例中的600px为MUI默认的sm断点，可根据实际需求调整媒体查询的尺寸阈值。

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