Блог

Вот кодовое поле. Я хочу использовать свой настроенный флажок в сетке данных. Поэтому я хотел бы изменить флажок первого столбца на круглый флажок. У меня уже есть флажок «обертка», который я хочу использовать, но я не знаю, как заменить флажок по умолчанию в datagrid. Похоже, я должен использовать флажок «Слоты», но написал его неправильно,

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

Вам необходимо использовать 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 опору, она будет использовать ее вместо этого.

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