[data grid] `processRowUpdate` does not get fired when grid is styled using `styled` from `@mui/material/styles`

[hlavacz]

[data grid] `processRowUpdate` does not get fired when grid is styled using `styled` from `@mui/material/styles`

[cherniavskii]

Hi @hlavacz
You should never define a component inside a component:

const Component1 = () => {
  // ❌ new component is created on every rerender
  const Component2 = () => <div>Component 2</div>;
  
  return <Component2 />
}

// ✅ the component is defined once
const Component2 = () => <div>Component 2</div>;

const Component1 = () => {  
  return <Component2 />
}

Here's a fixed demo based on the code provided: https://codesandbox.io/s/pensive-newton-rwtgph?file=/src/Demo.tsx

[hlavacz]

I found out, that styled DataGrid fire processRowUpdate if there is not used rowModesModel & onRowModesModelChange. When used normal DataGrid, not styled, it is fired also with using own modes model.

[KenanYusuf]

Hi @hlavacz, thanks for bringing this issue to our attention, I have managed to reproduce it using the code provided.

As a temporary workaround whilst we look into the issue, you could apply styles to the data grid using the sx prop, e.g:

<DataGrid
  rows={rows}
  columns={columns}
  editMode="row"
  rowModesModel={rowModesModel}
  onRowModesModelChange={handleRowModesModelChange}
  onRowEditStop={handleRowEditStop}
  processRowUpdate={processRowUpdate}
  slots={{
    toolbar: EditToolbar as GridSlots['toolbar'],
  }}
  slotProps={{
    toolbar: { setRows, setRowModesModel },
  }}
  sx={(theme) => ({
    '& .rigel-row-blue': {
      backgroundColor: getBackgroundColor(theme.palette.info.main, theme.palette.mode),
      '&:hover': {
        backgroundColor: getHoverBackgroundColor(theme.palette.info.main, theme.palette.mode),
      },
      '&.Mui-selected': {
        backgroundColor: getSelectedBackgroundColor(
          theme.palette.info.main,
          theme.palette.mode,
        ),
        '&:hover': {
          backgroundColor: getSelectedHoverBackgroundColor(
            theme.palette.info.main,
            theme.palette.mode,
          ),
        },
      },
    },
  })}
/>

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@hlavacz: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.