reactjs - 如何修改 Material UI datagrid 复选框图标？

Question

这是codesandbox。我想在 Datagrid 中使用我自定义的复选框。所以我想将第一列复选框更改为圆形复选框。我已经有了要使用的包装圆形复选框，但我不知道如何替换数据网格中的默认复选框。貌似应该用slots Checkbox，但是没写对，

https://codesandbox.io/s/datatable-material-demo-with-different-checkbox-mo715?file=/demo.js

Answer 1

您需要使用 slots api 覆盖 Material UI DataGrid 中的组件图书馆。

您应该在问题中包含代码，以便其他人可以受益。你有这个:

export default function DataTable() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <Checkbox />
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

它只渲染一个回合 <Checkbox/>从您的图书馆在 <DataGrid/> 上方.如果您改为传递 <Checkbox/>到 component prop 它将使用它。

export default function DataTable() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        components={{
          Checkbox: Checkbox,
        }}
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}