@rjsf/mui 6.5.1 → 6.5.2

package/lib/util.d.ts

@@ -1,4 +1,5 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
+import { BoxProps, FormHelperTextProps, GridProps, PaperProps, SxProps, TypographyProps } from '@mui/material';
 /**
  * Extract props meant for MUI components from the `options` field of the `uiSchema`.
  * @param {UIOptionsType} options - The options from the uiSchema
@@ -7,3 +8,21 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericOb
  * @returns {P}
  */
 export declare function getMuiProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, P extends GenericObjectType = GenericObjectType>(options: UIOptionsType<T, S, F>, propsToFilter?: string[], rjsfSlotPropsOnly?: boolean): P;
+/**
+ * Merges default `sx` props with any `sx` provided on a MUI component's props, returning a value
+ * suitable for passing directly to the MUI `sx` prop.
+ *
+ * When `muiProps.sx` is an array (only valid for `GridProps`), the default sx object is prepended
+ * to produce an `sx` array, preserving MUI's array-merge semantics. Otherwise the two objects are
+ * shallow-merged, with `muiProps.sx` taking precedence over the `sxProps`.
+ *
+ * If `muiProps` is omitted the `sxProps`` are returned as-is.
+ *
+ * @param sxProps - The default sx styles to apply
+ * @param [muiProps] - The MUI component props that may contain a user-supplied `sx`
+ * @returns - The merged sx value
+ */
+export declare function computeSxProps<MuiProps extends GridProps>(sxProps: SxProps, muiProps: MuiProps & {
+    sx: any[];
+}): MuiProps['sx'] | MuiProps['sx'][];
+export declare function computeSxProps<MuiProps extends BoxProps | FormHelperTextProps | PaperProps | TypographyProps>(sxProps: SxProps, muiProps?: MuiProps): MuiProps['sx'];

package/lib/util.js

@@ -21,4 +21,13 @@ export function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
     }
     return muiProps;
 }
+export function computeSxProps(sxProps, muiProps) {
+    if (!muiProps) {
+        return sxProps;
+    }
+    if (Array.isArray(muiProps === null || muiProps === void 0 ? void 0 : muiProps.sx)) {
+        return [sxProps, ...muiProps.sx];
+    }
+    return { ...sxProps, ...muiProps === null || muiProps === void 0 ? void 0 : muiProps.sx };
+}
 //# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAKzB,OAA+B,EAAE,aAAwB,EAAE,iBAA2B;IACtF,MAAM,QAAQ,GAAG,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAS,KAAK,EAAQ,CAAC;IAClD,IAAI,iBAAiB,EAAE,CAAC;QACtB,MAAM,EAAE,aAAa,EAAE,GAAG,QAAe,CAAC;QAC1C,OAAO,EAAE,aAAa,EAAkB,CAAC;IAC3C,CAAC;IACD,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;aACzB,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC5C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACnB,GAAG,CAAC,GAAc,CAAC,GAAG,QAAQ,CAAC,GAAc,CAAC,CAAC;YAC/C,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAO,CAAC,CAAC;IAChB,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAKzB,OAA+B,EAAE,aAAwB,EAAE,iBAA2B;IACtF,MAAM,QAAQ,GAAG,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAS,KAAK,EAAQ,CAAC;IAClD,IAAI,iBAAiB,EAAE,CAAC;QACtB,MAAM,EAAE,aAAa,EAAE,GAAG,QAAe,CAAC;QAC1C,OAAO,EAAE,aAAa,EAAkB,CAAC;IAC3C,CAAC;IACD,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;aACzB,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC5C,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACnB,GAAG,CAAC,GAAc,CAAC,GAAG,QAAQ,CAAC,GAAc,CAAC,CAAC;YAC/C,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAO,CAAC,CAAC;IAChB,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAwBD,MAAM,UAAU,cAAc,CAE5B,OAAgB,EAAE,QAAmB;IACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,CAAC,EAAE,CAAC;QAChC,OAAO,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,EAAE,EAAoB,CAAC;AAC3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.5.1",
+  "version": "6.5.2",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -62,8 +62,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
+    "@mui/icons-material": "^7.0.0 || ^9.0.0",
+    "@mui/material": "^7.0.0 || ^9.0.0",
     "@rjsf/core": "^6.5.x",
     "@rjsf/utils": "^6.5.x",
     "react": ">=18"
@@ -72,12 +72,12 @@
     "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
-    "@rjsf/core": "6.5.1",
-    "@rjsf/snapshot-tests": "6.5.1",
-    "@rjsf/utils": "6.5.1",
-    "@rjsf/validator-ajv8": "6.5.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@rjsf/core": "6.5.2",
+    "@rjsf/snapshot-tests": "6.5.2",
+    "@rjsf/utils": "6.5.2",
+    "@rjsf/validator-ajv8": "6.5.2",
     "eslint": "^8.57.1"
   },
   "publishConfig": {

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -11,7 +11,7 @@ import {
   StrictRJSFSchema,
   GenericObjectType,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the ArrayFieldItemTemplate. */
 export interface ArrayFieldItemTemplateMuiProps extends GenericObjectType {
@@ -56,25 +56,41 @@ export default function ArrayFieldItemTemplate<
     minWidth: 0,
   };
 
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ArrayFieldItemTemplateMuiProps>(uiOptions);
+  const {
+    rjsfSlotProps: {
+      arrayItemGridContainer,
+      arrayItemGridItem,
+      arrayItemInnerBox,
+      arrayItemOuterBox,
+      arrayItemPaper,
+      arrayItemToolbarGrid,
+    } = {},
+  } = getMuiProps<T, S, F, ArrayFieldItemTemplateMuiProps>(uiOptions);
 
   return (
-    <Grid container={true} alignItems='center' {...muiSlotProps?.arrayItemGridContainer}>
+    <Grid
+      container
+      {...arrayItemGridContainer}
+      sx={computeSxProps<GridProps>({ alignItems: 'center' }, arrayItemGridContainer)}
+    >
       <Grid
         size={{ xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }}
-        style={{ overflow: 'auto' }}
-        {...muiSlotProps?.arrayItemGridItem}
+        {...arrayItemGridItem}
+        sx={computeSxProps({ overflow: 'auto' }, arrayItemGridItem)}
       >
-        <Box mb={2} {...muiSlotProps?.arrayItemOuterBox}>
-          <Paper elevation={2} {...muiSlotProps?.arrayItemPaper}>
-            <Box p={2} {...muiSlotProps?.arrayItemInnerBox}>
+        <Box {...arrayItemOuterBox} sx={computeSxProps<BoxProps>({ mb: 2 }, arrayItemOuterBox)}>
+          <Paper elevation={2} {...arrayItemPaper}>
+            <Box {...arrayItemInnerBox} sx={computeSxProps<BoxProps>({ p: 2 }, arrayItemInnerBox)}>
               {children}
             </Box>
           </Paper>
         </Box>
       </Grid>
       {hasToolbar && (
-        <Grid sx={{ mt: hasDescription ? -5 : -1.5 }} {...muiSlotProps?.arrayItemToolbarGrid}>
+        <Grid
+          {...arrayItemToolbarGrid}
+          sx={computeSxProps<GridProps>({ mt: hasDescription ? -5 : -1.5 }, arrayItemToolbarGrid)}
+        >
           <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
         </Grid>
       )}

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -11,7 +11,7 @@ import {
   buttonId,
   GenericObjectType,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the ArrayFieldTemplate. */
 export interface ArrayFieldTemplateMuiProps extends GenericObjectType {
@@ -70,11 +70,19 @@ export default function ArrayFieldTemplate<
     ButtonTemplates: { AddButton },
   } = registry.templates;
 
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ArrayFieldTemplateMuiProps>(uiOptions);
+  const {
+    rjsfSlotProps: {
+      arrayPaper,
+      arrayBox,
+      arrayAddButtonGridContainer,
+      arrayAddButtonGridItem,
+      arrayAddButtonBox,
+    } = {},
+  } = getMuiProps<T, S, F, ArrayFieldTemplateMuiProps>(uiOptions);
 
   return (
-    <Paper elevation={2} {...muiSlotProps?.arrayPaper}>
-      <Box p={2} {...muiSlotProps?.arrayBox}>
+    <Paper elevation={2} {...arrayPaper}>
+      <Box {...arrayBox} sx={computeSxProps<BoxProps>({ p: 2 }, arrayBox)}>
         <ArrayFieldTitleTemplate
           fieldPathId={fieldPathId}
           title={uiOptions.title || title}
@@ -94,9 +102,13 @@ export default function ArrayFieldTemplate<
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {items}
         {canAdd && (
-          <Grid container justifyContent='flex-end' {...muiSlotProps?.arrayAddButtonGridContainer}>
-            <Grid {...muiSlotProps?.arrayAddButtonGridItem}>
-              <Box mt={2} {...muiSlotProps?.arrayAddButtonBox}>
+          <Grid
+            container
+            {...arrayAddButtonGridContainer}
+            sx={computeSxProps<GridProps>({ justifyContent: 'flex-end' }, arrayAddButtonGridContainer)}
+          >
+            <Grid {...arrayAddButtonGridItem}>
+              <Box {...arrayAddButtonBox} sx={computeSxProps<BoxProps>({ mt: 2 }, arrayAddButtonBox)}>
                 <AddButton
                   id={buttonId(fieldPathId, 'add')}
                   className='rjsf-array-item-add'

package/src/DescriptionField/DescriptionField.tsx

@@ -8,7 +8,7 @@ import {
   getUiOptions,
 } from '@rjsf/utils';
 import { RichDescription } from '@rjsf/core';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the DescriptionField. */
 export interface DescriptionFieldMuiProps extends GenericObjectType {
@@ -31,12 +31,16 @@ export default function DescriptionField<
   const { id, description, registry, uiSchema } = props;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const muiProps = getMuiProps<T, S, F, DescriptionFieldMuiProps>(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { descTypography } = {} } = getMuiProps<T, S, F, DescriptionFieldMuiProps>(uiOptions);
 
   if (description) {
     return (
-      <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }} {...muiSlotProps?.descTypography}>
+      <Typography
+        id={id}
+        variant='subtitle2'
+        {...descTypography}
+        sx={computeSxProps<TypographyProps>({ mt: 0.625 }, descTypography)}
+      >
         <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
       </Typography>
     );

package/src/ErrorList/ErrorList.tsx

@@ -15,7 +15,7 @@ import {
   TranslatableString,
   getUiOptions,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the ErrorList. */
 export interface ErrorListMuiProps extends GenericObjectType {
@@ -50,22 +50,32 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
   const { translateString } = registry;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ErrorListMuiProps>(uiOptions);
+  const {
+    rjsfSlotProps: {
+      errorPaper,
+      errorBox,
+      errorTypography,
+      errorList,
+      errorListItem,
+      errorListItemIcon,
+      errorListItemText,
+    } = {},
+  } = getMuiProps<T, S, F, ErrorListMuiProps>(uiOptions);
 
   return (
-    <Paper elevation={2} {...muiSlotProps?.errorPaper}>
-      <Box mb={2} p={2} {...muiSlotProps?.errorBox}>
-        <Typography variant='h6' {...muiSlotProps?.errorTypography}>
+    <Paper elevation={2} {...errorPaper}>
+      <Box {...errorBox} sx={computeSxProps<BoxProps>({ mb: 2, p: 2 }, errorBox)}>
+        <Typography variant='h6' {...errorTypography}>
           {translateString(TranslatableString.ErrorsLabel)}
         </Typography>
-        <List dense={true} {...muiSlotProps?.errorList}>
+        <List dense={true} {...errorList}>
           {errors.map((error, i: number) => {
             return (
-              <ListItem key={i} {...muiSlotProps?.errorListItem}>
-                <ListItemIcon {...muiSlotProps?.errorListItemIcon}>
+              <ListItem key={i} {...errorListItem}>
+                <ListItemIcon {...errorListItemIcon}>
                   <ErrorIcon color='error' />
                 </ListItemIcon>
-                <ListItemText primary={error.stack} {...muiSlotProps?.errorListItemText} />
+                <ListItemText primary={error.stack} {...errorListItemText} />
               </ListItem>
             );
           })}

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -9,7 +9,7 @@ import {
   GenericObjectType,
 } from '@rjsf/utils';
 import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the FieldHelpTemplate. */
 export interface FieldHelpTemplateMuiProps extends GenericObjectType {
@@ -35,15 +35,14 @@ export default function FieldHelpTemplate<
   }
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const muiProps = getMuiProps<T, S, F, FieldHelpTemplateMuiProps>(uiOptions);
-  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  const { rjsfSlotProps: { helpFormHelperText } = {} } = getMuiProps<T, S, F, FieldHelpTemplateMuiProps>(uiOptions);
 
   return (
     <FormHelperText
       component='div'
       id={helpId(fieldPathId)}
-      style={{ marginTop: '5px' }}
-      {...muiSlotProps?.helpFormHelperText}
+      {...helpFormHelperText}
+      sx={computeSxProps<FormHelperTextProps>({ mt: 0.625 }, helpFormHelperText)}
     >
       <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </FormHelperText>

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -12,7 +12,7 @@ import {
   titleId,
   buttonId,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the ObjectFieldTemplate. */
 export interface ObjectFieldTemplateMuiProps extends GenericObjectType {
@@ -68,7 +68,9 @@ export default function ObjectFieldTemplate<
     ButtonTemplates: { AddButton },
   } = registry.templates;
 
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ObjectFieldTemplateMuiProps>(uiOptions);
+  const {
+    rjsfSlotProps: { objectGridContainer, objectGridItem, objectAddButtonGridContainer, objectAddButtonGridItem } = {},
+  } = getMuiProps<T, S, F, ObjectFieldTemplateMuiProps>(uiOptions);
 
   return (
     <>
@@ -92,7 +94,12 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid container spacing={2} style={{ marginTop: '10px' }} {...muiSlotProps?.objectGridContainer}>
+      <Grid
+        container
+        spacing={2}
+        {...objectGridContainer}
+        sx={computeSxProps<GridProps>({ mt: 1.25 }, objectGridContainer)}
+      >
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element, index) =>
           // Remove the <Grid> if the inner element is hidden as the <Grid>
@@ -100,15 +107,24 @@ export default function ObjectFieldTemplate<
           element.hidden ? (
             element.content
           ) : (
-            <Grid size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }} {...muiSlotProps?.objectGridItem}>
+            <Grid
+              size={{ xs: 12 }}
+              key={index}
+              {...objectGridItem}
+              sx={computeSxProps<GridProps>({ mb: 1.25 }, objectGridItem)}
+            >
               {element.content}
             </Grid>
           ),
         )}
       </Grid>
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
-        <Grid container justifyContent='flex-end' {...muiSlotProps?.objectAddButtonGridContainer}>
-          <Grid {...muiSlotProps?.objectAddButtonGridItem}>
+        <Grid
+          container
+          {...objectAddButtonGridContainer}
+          sx={computeSxProps<GridProps>({ justifyContent: 'flex-end' }, objectAddButtonGridContainer)}
+        >
+          <Grid {...objectAddButtonGridItem}>
             <AddButton
               id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'

package/src/SubmitButton/SubmitButton.tsx

@@ -9,7 +9,7 @@ import {
   SubmitButtonProps,
   getUiOptions,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the SubmitButton. */
 export interface SubmitButtonMuiProps extends GenericObjectType {
@@ -35,17 +35,22 @@ export default function SubmitButton<
   }
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, SubmitButtonMuiProps>(uiOptions);
+  const { rjsfSlotProps: { submitBox, submitButton } = {}, ...otherMuiProps } = getMuiProps<
+    T,
+    S,
+    F,
+    SubmitButtonMuiProps
+  >(uiOptions);
 
   return (
-    <Box marginTop={3} {...muiSlotProps?.submitBox}>
+    <Box {...submitBox} sx={computeSxProps<BoxProps>({ mt: 3 }, submitBox)}>
       <Button
         type='submit'
         variant='contained'
         color='primary'
         {...submitButtonProps}
         {...otherMuiProps}
-        {...muiSlotProps?.submitButton}
+        {...submitButton}
       >
         {submitText}
       </Button>

package/src/TitleField/TitleField.tsx

@@ -10,7 +10,7 @@ import {
   StrictRJSFSchema,
   getUiOptions,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 
 /** Properties available for the `rjsfSlotProps` target of the TitleField. */
 export interface TitleFieldMuiProps extends GenericObjectType {
@@ -41,29 +41,41 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   const { id, title, optionalDataControl, uiSchema } = props;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, TitleFieldMuiProps>(uiOptions);
+  const {
+    rjsfSlotProps: {
+      titleBox,
+      titleDivider,
+      titleTypography,
+      titleGridContainer,
+      titleGridItem,
+      titleOptionalDataGridItem,
+    } = {},
+  } = getMuiProps<T, S, F, TitleFieldMuiProps>(uiOptions);
 
   let heading = (
-    <Typography variant='h5' {...muiSlotProps?.titleTypography}>
+    <Typography variant='h5' {...titleTypography}>
       {title}
     </Typography>
   );
   if (optionalDataControl) {
     heading = (
-      <Grid container={true} spacing={0} {...muiSlotProps?.titleGridContainer}>
-        <Grid size='grow' {...muiSlotProps?.titleGridItem}>
+      <Grid container={true} spacing={0} {...titleGridContainer}>
+        <Grid size='grow' {...titleGridItem}>
           {heading}
         </Grid>
-        <Grid justifyContent='flex-end' {...muiSlotProps?.titleOptionalDataGridItem}>
+        <Grid
+          {...titleOptionalDataGridItem}
+          sx={computeSxProps<GridProps>({ justifyContent: 'flex-end' }, titleOptionalDataGridItem)}
+        >
           {optionalDataControl}
         </Grid>
       </Grid>
     );
   }
   return (
-    <Box id={id} mb={1} mt={1} {...muiSlotProps?.titleBox}>
+    <Box id={id} {...titleBox} sx={computeSxProps<BoxProps>({ mb: 1, mt: 1 }, titleBox)}>
       {heading}
-      <Divider {...muiSlotProps?.titleDivider} />
+      <Divider {...titleDivider} />
     </Box>
   );
 }

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -12,7 +12,7 @@ import {
   WrapIfAdditionalTemplateProps,
   getUiOptions,
 } from '@rjsf/utils';
-import { getMuiProps } from '../util';
+import { computeSxProps, getMuiProps } from '../util';
 /** Properties available for the `rjsfSlotProps` target of the WrapIfAdditionalTemplate. */
 export interface WrapIfAdditionalTemplateMuiProps extends GenericObjectType {
   /** RJSF-specific slot props for targeting child elements of the WrapIfAdditionalTemplate. */
@@ -67,8 +67,8 @@ export default function WrapIfAdditionalTemplate<
   };
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
-  const { rjsfSlotProps } = getMuiProps<T, S, F, WrapIfAdditionalTemplateMuiProps>(uiOptions);
-  const muiSlotProps = rjsfSlotProps;
+  const { rjsfSlotProps: { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = {} } =
+    getMuiProps<T, S, F, WrapIfAdditionalTemplateMuiProps>(uiOptions);
 
   if (!additional) {
     return (
@@ -78,17 +78,15 @@ export default function WrapIfAdditionalTemplate<
     );
   }
 
-  const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
-
   return (
     <Grid
       container
       key={`${id}-key`}
-      alignItems='flex-start'
       spacing={2}
       className={classNames}
       style={style}
       {...wrapGridContainer}
+      sx={computeSxProps<GridProps>({ alignItems: 'flex-start' }, wrapGridContainer)}
     >
       <Grid size={5.5} {...wrapKeyGridItem}>
         <TextField
@@ -107,7 +105,7 @@ export default function WrapIfAdditionalTemplate<
       <Grid size={5.5} {...wrapChildrenGridItem}>
         {children}
       </Grid>
-      <Grid sx={{ mt: 1.5 }} {...wrapRemoveButtonGridItem}>
+      <Grid {...wrapRemoveButtonGridItem} sx={computeSxProps<GridProps>({ mt: 1.5 }, wrapRemoveButtonGridItem)}>
         <RemoveButton
           id={buttonId(id, 'remove')}
           className='rjsf-object-property-remove'

package/src/util.ts

@@ -1,5 +1,7 @@
 import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
 
+import { BoxProps, FormHelperTextProps, GridProps, PaperProps, SxProps, TypographyProps } from '@mui/material';
+
 /**
  * Extract props meant for MUI components from the `options` field of the `uiSchema`.
  * @param {UIOptionsType} options - The options from the uiSchema
@@ -28,3 +30,37 @@ export function getMuiProps<
   }
   return muiProps;
 }
+
+/**
+ * Merges default `sx` props with any `sx` provided on a MUI component's props, returning a value
+ * suitable for passing directly to the MUI `sx` prop.
+ *
+ * When `muiProps.sx` is an array (only valid for `GridProps`), the default sx object is prepended
+ * to produce an `sx` array, preserving MUI's array-merge semantics. Otherwise the two objects are
+ * shallow-merged, with `muiProps.sx` taking precedence over the `sxProps`.
+ *
+ * If `muiProps` is omitted the `sxProps`` are returned as-is.
+ *
+ * @param sxProps - The default sx styles to apply
+ * @param [muiProps] - The MUI component props that may contain a user-supplied `sx`
+ * @returns - The merged sx value
+ */
+export function computeSxProps<MuiProps extends GridProps>(
+  sxProps: SxProps,
+  muiProps: MuiProps & { sx: any[] },
+): MuiProps['sx'] | MuiProps['sx'][];
+export function computeSxProps<MuiProps extends BoxProps | FormHelperTextProps | PaperProps | TypographyProps>(
+  sxProps: SxProps,
+  muiProps?: MuiProps,
+): MuiProps['sx'];
+export function computeSxProps<
+  MuiProps extends BoxProps | FormHelperTextProps | GridProps | PaperProps | TypographyProps,
+>(sxProps: SxProps, muiProps?: MuiProps): MuiProps['sx'] | MuiProps['sx'][] {
+  if (!muiProps) {
+    return sxProps;
+  }
+  if (Array.isArray(muiProps?.sx)) {
+    return [sxProps, ...muiProps.sx];
+  }
+  return { ...sxProps, ...muiProps?.sx } as MuiProps['sx'];
+}