MUI X v4 DataGrid toolbar属性不识别csvOptions问题排查与解决

我在MUI X v4 DataGrid中尝试自定义csvOptions，发现通过componentsProps传入Toolbar的配置不生效，但自定义Toolbar组件并直接给GridToolbarExport设置该选项却能正常工作。想知道两种方式的差异原因，以及如何让第一种方式生效。

差异原因 #

• 内置的GridToolbar组件不会接收并传递csvOptions给内部的GridToolbarExport。componentsProps.toolbar中的参数只会传递给Toolbar组件本身，但默认的GridToolbar并没有处理csvOptions这个props，因此无法将其传递给导出按钮组件，导致配置不生效。
• 自定义Toolbar时，你直接将csvOptions传给了GridToolbarExport组件——这个组件本身就支持该props，因此配置能直接生效。

让第一种方式生效的解决方案 #

要通过componentsProps传递csvOptions生效，你需要封装一层自定义Toolbar组件，接收csvOptions并将其传递给内部的GridToolbarExport，再将封装后的组件作为Toolbar传入components。

修改后的生效代码示例 #

import * as React from "react";
import { DataGrid, GridToolbar, GridToolbarExport } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

// 封装支持接收csvOptions的Toolbar组件
const CustomizableToolbar = ({ csvOptions }) => (
  <GridToolbar>
    {/* 替换默认导出按钮，传入csvOptions */}
    <GridToolbarExport csvOptions={csvOptions} />
  </GridToolbar>
);

export default function ExportSelectorGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 4,
    maxColumns: 6
  });

  return (
    <div style={{ height: 300, width: "100%" }}>
      <DataGrid
        {...data}
        components={{
          Toolbar: CustomizableToolbar
        }}
        componentsProps={{
          toolbar: {
            csvOptions: { delimiter: ";" }
          }
        }}
      />
    </div>
  );
}

原代码示例对比 #

示例1：通过componentsProps传入不生效 #

import * as React from "react";
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

export default function ExportSelectorGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 4,
    maxColumns: 6
  });

  return (
    <div style={{ height: 300, width: "100%" }}>
      <DataGrid
        {...data}
        components={{
          Toolbar: GridToolbar
        }}
        componentsProps={{
          toolbar: {
            csvOptions: { delimiter: ";" }
          }
        }}
      />
    </div>
  );
}

/***
导出结果（仍使用默认逗号分隔）：
Desk,Commodity,Trader Name,Trader Email,Quantity
D-1600,Cocoa,Ronald Malone,gewcu@vinwuz.by,"7,238"
D-1965,Coffee C,Todd Hammond,ovlo@comeh.sb,"70,264"
D-2173,Coffee C,Alexander Salazar,bo@ufhehhaw.sj,"36,223"
D-4616,Rough Rice,Bruce Ferguson,ih@zorihanu.cy,"19,020"
**/

示例2：自定义Toolbar直接配置生效 #

import * as React from "react";
import {
  DataGrid,
  GridToolbar,
  GridToolbarContainer,
  GridToolbarExport
} from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarExport csvOptions={{ delimiter: ";" }} />
    </GridToolbarContainer>
  );
}

export default function ExportSelectorGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 4,
    maxColumns: 6
  });

  return (
    <div style={{ height: 300, width: "100%" }}>
      <DataGrid
        {...data}
        components={{
          Toolbar: CustomToolbar
        }}
      />
    </div>
  );
}

/** 
导出结果（使用分号分隔）：
Desk;Commodity;Trader Name;Trader Email;Quantity
D-1600;Cocoa;Ronald Malone;gewcu@vinwuz.by;7,238
D-1965;Coffee C;Todd Hammond;ovlo@comeh.sb;70,264
D-2173;Coffee C;Alexander Salazar;bo@ufhehhaw.sj;36,223
D-4616;Rough Rice;Bruce Ferguson;ih@zorihanu.cy;19,020
**/

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