如何修改材质 UI 数据网格复选框图标？

Question

这里是代码框。我想在 Datagrid 中使用我自定义的复选框。所以我想将第一列复选框更改为圆形复选框。我已经有了要使用的包装圆形复选框，但我不知道如何替换 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>
  );
}

这只是在<DataGrid/> 上方从您的库中呈现一轮<Checkbox/>。如果您改为将 <Checkbox/> 传递给 component 道具，它将改为使用它。

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