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

You need to use the slots api to override components in the Material UI DataGrid library.

You should include the code in your question so others can benefit. You have this:

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

Which just renders a round <Checkbox/> from your library above the <DataGrid/>. If you instead pass the <Checkbox/> to the component prop it will use that instead.

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

if you're still wondering about this, or anybody else who wants to do this, I checked your example code and made a fork here with the solution:

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

Basically, the component should be passed in to BaseCheckbox and the custom checkbox needs to pass the props through.

Screenshot