How to modify material UI datagrid checkbox icon?

Question

Here is the codesandbox. I want to use my customized checkbox in the Datagrid. So I would like to change the first column checkbox to a round checkbox. I already have the wrapper round checkbox I want to use, but I do not know how to replace the default checkbox in datagrid. It looks like I should use slots Checkbox, but did not write it correctly,

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

Answer 1

您需要使用插槽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/>给componentprop，它将使用它。

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>
  );
}

Answer 2

如果您仍然想知道这一点，或者任何其他想要这样做的人，我检查了您的示例代码并在此处使用解决方案创建了一个分支：

https://codesandbox.io/s/datatable-material-demo-with- Different-checkbox-forked-n1cnz0?file=/demo.js

基本上，应该传入组件，BaseCheckbox并且自定义复选框需要传递道具。

截屏