MUI - 高级数据网格工具栏图标未正确显示

Question

我想做三件事 -

1. 修正显示
2. 为工具栏项放置自定义图标
3. 添加自定义工具栏选项。

This is how I am using Datagrid.
  <Grid item xs={12}>
    <DataGridPremium
      columns={columns}
      rows={rows}
      slots={{ toolbar: GridToolbar }}
      components={{
        Toolbar: GridToolbar,
      }}
      autoHeight
      checkboxSelection
    />
  </Grid>

Answer 1

要更改默认图标，您可以执行以下操作：

defaultProps:{slots:{filterPanelDeleteIcon: () => <YourIcon/>}}

您也可以对其他图标执行此操作。

来自 mui 文档（document）的以下代码展示了如何覆盖默认属性：

 function CustomToolbar() {
  return (
<GridToolbarContainer>
  <GridToolbarColumnsButton />
  <GridToolbarFilterButton />
  <GridToolbarDensitySelector
    slotProps={{ tooltip: { title: 'Change density' } }}
  />
  <Box sx={{ flexGrow: 1 }} />
  <GridToolbarExport
    slotProps={{
      tooltip: { title: 'Export data' },
      button: { variant: 'outlined' },
    }}
  />
</GridToolbarContainer>
  );
}