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

Question

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

该文档讨论了插槽（但没有解释如何使用它们）。有一个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 中执行操作的标准方法，我们在哪里可以找到一些文档？

这是一个代码沙箱。

Answer 1

您可以在此处找到此文档： https: //material-ui.com/components/data-grid/components/#icons ，其中包含可在您注意到的文档中自定义的可用图标列表。该示例展示了如何使用componentsprop 来自定义图标。

以下语法有效：

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