From cca2e1cbb5ec6e7e6a7f958fe9999eb71d71b304 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Wed, 17 Jun 2026 14:41:02 +0200
Subject: [PATCH 1/3] [DataGrid] Define `overflowAnchor` style at the right
 element (#22849)

---
 .../components/containers/GridRootStyles.ts   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index d9b859d0a59f8..03a6aa2876486 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -183,13 +183,23 @@ export const GridRootStyles = styled('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflow: 'hidden',
-    overflowAnchor: 'none', // Keep the same scrolling position
     transform: 'translate(0, 0)', // Create a stacking context to keep scrollbars from showing on top
 
-    [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
-      borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
-      borderTopRightRadius: 'var(--unstable_DataGrid-radius)',
-    },
+    [`& .${c.virtualScroller}`]: {
+      overflowAnchor: 'none', // Keep the same scrolling position
+    },
+
+    // Use `css` tagged template so the ignore-comment remains a sibling of the
+    // `:first-child` rule in the stylis AST. Previously, the comment was embedded
+    // in the object-key selector, which got separated from the rule during
+    // pre-serialization when `styleOverrides` were applied, re-triggering Emotion's
+    // unsafe-selector SSR warning. https://github.com/emotion-js/emotion/issues/1105
+    [`.${c.main}`]: css`
+      & > *:first-child ${ignoreSsrWarning} {
+        border-top-left-radius: var(--unstable_DataGrid-radius);
+        border-top-right-radius: var(--unstable_DataGrid-radius);
+      }
+    `,
     [`&.${c.autoHeight}`]: {
       height: 'auto',
     },

From 07d5b40e56747659c8c90f820f74a32eebb39373 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Wed, 17 Jun 2026 14:46:29 +0200
Subject: [PATCH 2/3] Revert non related changes

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
---
 .../x-data-grid/src/components/containers/GridRootStyles.ts  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 03a6aa2876486..c830ea87b7f94 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -189,7 +189,10 @@ export const GridRootStyles = styled('div', {
       overflowAnchor: 'none', // Keep the same scrolling position
     },
 
-    // Use `css` tagged template so the ignore-comment remains a sibling of the
+   [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
+      borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+      borderTopRightRadius: 'var(--unstable_DataGrid-radius)',
+    },
     // `:first-child` rule in the stylis AST. Previously, the comment was embedded
     // in the object-key selector, which got separated from the rule during
     // pre-serialization when `styleOverrides` were applied, re-triggering Emotion's

From c2c1ec1419f4b42a352480a50860a6d68b60754c Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Wed, 17 Jun 2026 14:47:56 +0200
Subject: [PATCH 3/3] Cleanup

Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
---
 .../src/components/containers/GridRootStyles.ts      | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index c830ea87b7f94..f359f1163c685 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -189,20 +189,10 @@ export const GridRootStyles = styled('div', {
       overflowAnchor: 'none', // Keep the same scrolling position
     },
 
-   [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
+    [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)',
     },
-    // `:first-child` rule in the stylis AST. Previously, the comment was embedded
-    // in the object-key selector, which got separated from the rule during
-    // pre-serialization when `styleOverrides` were applied, re-triggering Emotion's
-    // unsafe-selector SSR warning. https://github.com/emotion-js/emotion/issues/1105
-    [`.${c.main}`]: css`
-      & > *:first-child ${ignoreSsrWarning} {
-        border-top-left-radius: var(--unstable_DataGrid-radius);
-        border-top-right-radius: var(--unstable_DataGrid-radius);
-      }
-    `,
     [`&.${c.autoHeight}`]: {
       height: 'auto',
     },