如何覆盖 Material UI DataGrid 中的图标？

Question

我们需要从 Material UI 自定义 DataGrid 中使用的大部分图标。阅读非常有限的文档，我们无法弄清楚如何做到这一点。

documentation 谈到了插槽（但没有说明如何使用这些插槽）。有一个icons 属性，但我们不确定IconsOptions 是否与插槽相同。无论如何，我们尝试了以下方法：

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          icons={{
            ColumnMenuIcon: AcUnit
          }}
          />
      </div>

以及以下内容：

      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          ColumnMenuIcon={AcUnit}
          />
      </div>

无济于事。我们尝试改用<AcUnit/>，但没有改变。尝试阅读代码，但这也无济于事......

这样做的正确方法是什么？如果这是在 React 或 Material UI 中做事的标准方式，我们在哪里可以找到一些文档？

这是Code Sandbox。

Answer 1

您可以在此处找到此文档：https://material-ui.com/components/data-grid/components/#icons 以及可在 documentation you noted 中自定义的可用图标列表。该示例显示使用 components 属性自定义图标。

以下语法有效：

        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          components={{
            ColumnMenuIcon: AcUnit
          }}
        />