How to style in table cell for cell editable in react material table?

Question

I am using a material table in my code. I am using cell editable. But when I edit my table cell, its style becomes weird. Please see the image. How to fix this. Codesandbox code: https://codesandbox.io/s/material-demo-forked-h1f8d?file=/demo.js:1142-1513

  <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            console.log("newValue: " + newValue);
            setTimeout(resolve, 1000);
          });
        }
      }}
    />

Answer 1

In case anyone is still looking for an answer, the solution is to use cellStyle inside cellEditable. The documentation shows this briefly in the Cell Editing section. https://material-table.com/#/docs/features/editable

For example:

cellEditable={{
  cellStyle: {
    fontSize: 14,
    padding: '0.3em'
  },
  onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {...
  }
}}