Update style

- Update style of MultiInput...RangeField Root and Seperator
mui · Dec 22, 2024 · 326b7c3 · 326b7c3
1 parent 0458ca5
commit 326b7c3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -44,7 +44,7 @@ const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undef
 
 const MultiInputDateRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="start" {...props} />
   )),
   {
     name: 'MuiMultiInputDateRangeField',
@@ -59,6 +59,7 @@ const MultiInputDateRangeFieldSeparator = styled(Typography, {
   overridesResolver: (props, styles) => styles.separator,
 })({
   lineHeight: '1.4375em', // 23px
+  padding: '16.5px 0',
 });
 
 type MultiInputDateRangeFieldComponent = (<

diff --git a/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -42,7 +42,7 @@ const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undef
 
 const MultiInputDateTimeRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="start" {...props} />
   )),
   {
     name: 'MuiMultiInputDateTimeRangeField',
@@ -57,6 +57,7 @@ const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
   overridesResolver: (props, styles) => styles.separator,
 })({
   lineHeight: '1.4375em', // 23px
+  padding: '16.5px 0',
 });
 
 type MultiInputDateTimeRangeFieldComponent = (<

diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -44,7 +44,7 @@ const useUtilityClasses = (classes: Partial<MultiInputRangeFieldClasses> | undef
 
 const MultiInputTimeRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="start" {...props} />
   )),
   {
     name: 'MuiMultiInputTimeRangeField',
@@ -59,6 +59,7 @@ const MultiInputTimeRangeFieldSeparator = styled(Typography, {
   overridesResolver: (props, styles) => styles.separator,
 })({
   lineHeight: '1.4375em', // 23px
+  padding: '16.5px 0',
 });
 
 type MultiInputTimeRangeFieldComponent = (<