如何在打印MUIDataTable时隐藏工具栏与分页组件？

MUIDataTable默认打印会包含工具栏、分页等元素，要只保留表格数据，直接用CSS打印媒体查询隐藏不需要的组件即可，具体操作如下：

1. 添加打印专属CSS样式
   在你的样式文件（或组件内的样式标签）中加入以下代码：

@media print {
  /* 隐藏顶部工具栏（含默认工具栏、自定义工具栏、导出按钮等） */
  .MUIDataTableToolbar-root {
    display: none !important;
  }
  /* 隐藏底部分页组件 */
  .MUIDataTablePagination-toolbar {
    display: none !important;
  }
  /* 可选：隐藏筛选栏（如果不需要打印筛选区域） */
  .MUIDataTableFilter-root {
    display: none !important;
  }
}

2. 自定义工具栏的精准隐藏（可选）
   如果你使用了customToolbar，可以给自定义工具栏组件添加专属类名，确保打印时精准隐藏：

// 修改customToolbar代码，添加className属性
customToolbar: () => (
  <CustomToolbar
    className="custom-table-toolbar"
    csvData={allRoles}
    url="/app/data/administration/role-actions"
    tooltip="add new role"
    fileName="Roles"
    excludeAttributes={excludeAttributes}
    hasAddRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_create}
    hasExportRole={thelogedUser.userRoles[0].actionsNames.admin_roles_management_export}
  />
),

然后在打印样式中补充：

@media print {
  .custom-table-toolbar {
    display: none !important;
  }
}

3. 验证效果
   点击打印按钮后，浏览器预览界面只会显示表格主体数据，工具栏、分页等元素都会被隐藏。

原理说明：通过CSS的@media print媒体查询，针对打印场景覆盖组件默认样式，强制隐藏指定类名对应的DOM元素。MUIDataTable的各组件都有固定的Material-UI类名，直接针对这些类名设置样式即可实现需求。

内容的提问来源于stack exchange，提问作者Ait Friha Zaid