[pickers] Fix desktop date time Pickers grid layout (#12748)

mui · Apr 12, 2024 · 786e334 · 786e334
1 parent a3273e3
commit 786e334
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
@@ -91,8 +91,9 @@ const rendererInterceptor = function rendererInterceptor<
         availableRangePositions: [rangePosition],
         view: !isTimeViewActive ? popperView : 'day',
         views: rendererProps.views.filter(isDatePickerView),
+        sx: [{ gridColumn: 1 }, ...finalProps.sx],
       })}
-      <Divider orientation="vertical" />
+      <Divider orientation="vertical" sx={{ gridColumn: 2 }} />
       <DateTimeRangePickerTimeWrapper
         {...finalProps}
         view={isTimeViewActive ? popperView : 'hours'}
@@ -106,6 +107,7 @@ const rendererInterceptor = function rendererInterceptor<
             {}
           >
         }
+        sx={[{ gridColumn: 3 }, ...finalProps.sx]}
       />
     </React.Fragment>
   );

diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
@@ -90,16 +90,18 @@ const rendererInterceptor = function rendererInterceptor<
         view: !isTimeViewActive ? popperView : 'day',
         focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
         views: rendererProps.views.filter(isDatePickerView),
+        sx: [{ gridColumn: 1 }, ...finalProps.sx],
       })}
       {timeViewsCount > 0 && (
         <React.Fragment>
-          <Divider orientation="vertical" />
+          <Divider orientation="vertical" sx={{ gridColumn: 2 }} />
           {inViewRenderers[isTimeViewActive ? popperView : 'hours']?.({
             ...finalProps,
             view: isTimeViewActive ? popperView : 'hours',
             focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
             openTo: isInternalTimeView(openTo) ? openTo : 'hours',
             views: rendererProps.views.filter(isInternalTimeView),
+            sx: [{ gridColumn: 3 }, ...finalProps.sx],
           })}
         </React.Fragment>
       )}