diff --git a/packages/toolpad-core/src/Crud/List.tsx b/packages/toolpad-core/src/Crud/List.tsx index 2348335f458..ca362d9c4f7 100644 --- a/packages/toolpad-core/src/Crud/List.tsx +++ b/packages/toolpad-core/src/Crud/List.tsx @@ -29,6 +29,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; import invariant from 'invariant'; import { useDialogs } from '../useDialogs'; import { useNotifications } from '../useNotifications'; +import { NoSsr } from '../shared/NoSsr'; import { CrudContext, RouterContext, WindowContext } from '../shared/context'; import { useLocaleText } from '../AppProvider/LocalizationProvider'; import { DataSourceCache } from './cache'; @@ -402,43 +403,47 @@ function List(props: ListProps) { ) : null} - )} - sx={{ - [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: { - outline: 'transparent', - }, - [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: { - outline: 'none', - }, - ...(onRowClick - ? { - [`& .${gridClasses.row}:hover`]: { - cursor: 'pointer', - }, - } - : {}), - ...slotProps?.dataGrid?.sx, - }} - /> + {/* Use NoSsr to prevent issue https://github.com/mui/mui-x/issues/17077 as DataGrid has no SSR support */} + + )} + sx={{ + [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: { + outline: 'transparent', + }, + [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: + { + outline: 'none', + }, + ...(onRowClick + ? { + [`& .${gridClasses.row}:hover`]: { + cursor: 'pointer', + }, + } + : {}), + ...slotProps?.dataGrid?.sx, + }} + /> + {error && ( {error.message} diff --git a/packages/toolpad-core/src/shared/NoSsr.tsx b/packages/toolpad-core/src/shared/NoSsr.tsx new file mode 100644 index 00000000000..8fc9279590e --- /dev/null +++ b/packages/toolpad-core/src/shared/NoSsr.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import useSsr from '@toolpad/utils/hooks/useSsr'; + +export interface NoSsrProps { + children?: React.ReactNode; + fallback?: React.ReactNode; +} + +/** + * @ignore - internal component. + * Alternative version of MUI NoSsr that avoids state updates during layout effects. + */ +export function NoSsr({ children, fallback = null }: NoSsrProps) { + const isSsr = useSsr(); + + return {isSsr ? fallback : children}; +}