@rjsf/mui 6.4.1 → 6.5.0

package/lib/util.d.ts

@@ -0,0 +1,9 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
+/**
+ * Extract props meant for MUI components from the `options` field of the `uiSchema`.
+ * @param {UIOptionsType} options - The options from the uiSchema
+ * @param {string[]} [propsToFilter] - An optional allowlist of props to return (used by button/icon components)
+ * @param {boolean} [rjsfSlotPropsOnly] - If true, returns only `rjsfSlotProps`, preventing root-level prop bleeding
+ * @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;

package/lib/util.js

@@ -0,0 +1,24 @@
+/**
+ * Extract props meant for MUI components from the `options` field of the `uiSchema`.
+ * @param {UIOptionsType} options - The options from the uiSchema
+ * @param {string[]} [propsToFilter] - An optional allowlist of props to return (used by button/icon components)
+ * @param {boolean} [rjsfSlotPropsOnly] - If true, returns only `rjsfSlotProps`, preventing root-level prop bleeding
+ * @returns {P}
+ */
+export function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
+    const muiProps = (options === null || options === void 0 ? void 0 : options.mui) || {};
+    if (rjsfSlotPropsOnly) {
+        const { rjsfSlotProps } = muiProps;
+        return { rjsfSlotProps };
+    }
+    if (propsToFilter) {
+        return Object.keys(muiProps)
+            .filter((key) => propsToFilter.includes(key))
+            .reduce((obj, key) => {
+            obj[key] = muiProps[key];
+            return obj;
+        }, {});
+    }
+    return muiProps;
+}
+//# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -72,12 +72,12 @@
     "@emotion/jest": "^11.14.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/material": "^7.3.7",
-    "@rjsf/core": "6.4.1",
-    "@rjsf/snapshot-tests": "6.4.1",
-    "@rjsf/utils": "6.4.1",
-    "@rjsf/validator-ajv8": "6.4.1",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@rjsf/core": "6.5.0",
+    "@rjsf/snapshot-tests": "6.5.0",
+    "@rjsf/utils": "6.5.0",
+    "@rjsf/validator-ajv8": "6.5.0",
     "eslint": "^8.57.1"
   },
   "publishConfig": {

package/src/AddButton/AddButton.tsx

@@ -1,6 +1,14 @@
 import AddIcon from '@mui/icons-material/Add';
-import IconButton from '@mui/material/IconButton';
-import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import IconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
+import {
+  FormContextType,
+  getUiOptions,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
@@ -10,8 +18,18 @@ export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSche
   ...props
 }: IconButtonProps<T, S, F>) {
   const { translateString } = registry;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const muiProps = getMuiProps<T, S, F, MuiIconButtonProps>(uiOptions, [
+    'color',
+    'disableFocusRipple',
+    'disableRipple',
+    'edge',
+    'size',
+    'sx',
+  ]);
+
   return (
-    <IconButton title={translateString(TranslatableString.AddItemButton)} {...props} color='primary'>
+    <IconButton title={translateString(TranslatableString.AddItemButton)} {...props} color='primary' {...muiProps}>
       <AddIcon />
     </IconButton>
   );

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
+import Box, { BoxProps } from '@mui/material/Box';
+import Grid, { GridProps } from '@mui/material/Grid';
+import Paper, { PaperProps } from '@mui/material/Paper';
 import {
   ArrayFieldItemTemplateProps,
   FormContextType,
@@ -9,7 +9,28 @@ import {
   getTemplate,
   RJSFSchema,
   StrictRJSFSchema,
+  GenericObjectType,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the ArrayFieldItemTemplate. */
+export interface ArrayFieldItemTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the ArrayFieldItemTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the outermost `Grid` container. */
+    arrayItemGridContainer?: GridProps;
+    /** Props applied to the `Grid` item wrapping the item's content. */
+    arrayItemGridItem?: GridProps;
+    /** Props applied to the outer `Box` container. */
+    arrayItemOuterBox?: BoxProps;
+    /** Props applied to the `Paper` elevation component. */
+    arrayItemPaper?: PaperProps;
+    /** Props applied to the inner `Box` containing the actual children. */
+    arrayItemInnerBox?: BoxProps;
+    /** Props applied to the `Grid` containing the item's buttons. */
+    arrayItemToolbarGrid?: GridProps;
+  };
+}
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
@@ -34,17 +55,26 @@ export default function ArrayFieldItemTemplate<
     fontWeight: 'bold',
     minWidth: 0,
   };
+
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ArrayFieldItemTemplateMuiProps>(uiOptions);
+
   return (
-    <Grid container={true} alignItems='center'>
-      <Grid size={{ xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }} style={{ overflow: 'auto' }}>
-        <Box mb={2}>
-          <Paper elevation={2}>
-            <Box p={2}>{children}</Box>
+    <Grid container={true} alignItems='center' {...muiSlotProps?.arrayItemGridContainer}>
+      <Grid
+        size={{ xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }}
+        style={{ overflow: 'auto' }}
+        {...muiSlotProps?.arrayItemGridItem}
+      >
+        <Box mb={2} {...muiSlotProps?.arrayItemOuterBox}>
+          <Paper elevation={2} {...muiSlotProps?.arrayItemPaper}>
+            <Box p={2} {...muiSlotProps?.arrayItemInnerBox}>
+              {children}
+            </Box>
           </Paper>
         </Box>
       </Grid>
       {hasToolbar && (
-        <Grid sx={{ mt: hasDescription ? -5 : -1.5 }}>
+        <Grid sx={{ mt: hasDescription ? -5 : -1.5 }} {...muiSlotProps?.arrayItemToolbarGrid}>
           <ArrayFieldItemButtonsTemplate {...buttonsProps} style={btnStyle} />
         </Grid>
       )}

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,6 +1,6 @@
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
+import Box, { BoxProps } from '@mui/material/Box';
+import Grid, { GridProps } from '@mui/material/Grid';
+import Paper, { PaperProps } from '@mui/material/Paper';
 import {
   getTemplate,
   getUiOptions,
@@ -9,7 +9,26 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
   buttonId,
+  GenericObjectType,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the ArrayFieldTemplate. */
+export interface ArrayFieldTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the ArrayFieldTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the wrapper `Paper` material. */
+    arrayPaper?: PaperProps;
+    /** Props applied to the primary `Box` container. */
+    arrayBox?: BoxProps;
+    /** Props applied to the wrapper `Grid` container next to the Add Button. */
+    arrayAddButtonGridContainer?: GridProps;
+    /** Props applied to the `Grid` item containing the Add Button. */
+    arrayAddButtonGridItem?: GridProps;
+    /** Props applied to the `Box` containing the Add Button. */
+    arrayAddButtonBox?: BoxProps;
+  };
+}
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -50,9 +69,12 @@ export default function ArrayFieldTemplate<
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
+
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ArrayFieldTemplateMuiProps>(uiOptions);
+
   return (
-    <Paper elevation={2}>
-      <Box p={2}>
+    <Paper elevation={2} {...muiSlotProps?.arrayPaper}>
+      <Box p={2} {...muiSlotProps?.arrayBox}>
         <ArrayFieldTitleTemplate
           fieldPathId={fieldPathId}
           title={uiOptions.title || title}
@@ -72,9 +94,9 @@ export default function ArrayFieldTemplate<
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {items}
         {canAdd && (
-          <Grid container justifyContent='flex-end'>
-            <Grid>
-              <Box mt={2}>
+          <Grid container justifyContent='flex-end' {...muiSlotProps?.arrayAddButtonGridContainer}>
+            <Grid {...muiSlotProps?.arrayAddButtonGridItem}>
+              <Box mt={2} {...muiSlotProps?.arrayAddButtonBox}>
                 <AddButton
                   id={buttonId(fieldPathId, 'add')}
                   className='rjsf-array-item-add'

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,7 +1,8 @@
 import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
-
+import { InputProps as MuiInputProps } from '@mui/material/Input';
+import { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -9,10 +10,27 @@ import {
   getInputProps,
   labelValue,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
 import { SchemaExamples } from '@rjsf/core';
+import { getMuiProps } from '../util';
+
+/** Properties available for the MUI `ui:options` of the BaseInputTemplate.
+ *  Unlike RJSF templates, `slotProps` here maps directly to MUI's native `TextField` `slotProps`,
+ *  enabling type-safe customization of the underlying MUI sub-components. */
+export interface BaseInputTemplateMuiProps extends GenericObjectType {
+  /** Native MUI `TextField` slotProps for targeting specific sub-components. */
+  slotProps?: {
+    /** Props applied to the base native HTML `<input>` or `<textarea>` element. */
+    htmlInput?: React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
+    /** Props applied to the MUI `Input` element, useful for `endAdornment`/`startAdornment`. */
+    input?: MuiInputProps;
+    /** Props applied to the MUI `InputLabel` element. */
+    inputLabel?: MuiInputLabelProps;
+  };
+}
 
 const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
 
@@ -59,8 +77,13 @@ export default function BaseInputTemplate<
   const { ClearButton } = registry.templates.ButtonTemplates;
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   const { step, min, max, accept, ...rest } = getInputProps<T, S, F>(schema, type, options);
+
+  const muiProps = getMuiProps<T, S, F, BaseInputTemplateMuiProps>(options);
+  const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
+
   const htmlInputProps = {
     ...slotProps?.htmlInput,
+    ...muiSlotProps?.htmlInput,
     step,
     min,
     max,
@@ -72,8 +95,8 @@ export default function BaseInputTemplate<
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
   const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type)
-    ? { ...slotProps?.inputLabel, ...InputLabelProps, shrink: true }
-    : { ...slotProps?.inputLabel, ...InputLabelProps };
+    ? { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps, shrink: true }
+    : { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps };
   const _onClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
@@ -82,7 +105,7 @@ export default function BaseInputTemplate<
     },
     [onChange, options.emptyValue],
   );
-  const inputProps = { ...InputProps, ...slotProps?.input };
+  const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
   if (options.allowClearTextInputs && value && !readonly && !disabled) {
     const clearAdornment = (
       <InputAdornment position='end'>
@@ -111,6 +134,7 @@ export default function BaseInputTemplate<
         disabled={disabled || readonly}
         slotProps={{
           ...slotProps,
+          ...muiSlotProps,
           input: inputProps,
           htmlInput: htmlInputProps,
           inputLabel: DisplayInputLabelProps,
@@ -121,7 +145,7 @@ export default function BaseInputTemplate<
         onChange={onChangeOverride || _onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
-        {...(textFieldProps as TextFieldProps)}
+        {...({ ...otherMuiProps, ...textFieldProps } as TextFieldProps)}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
       <SchemaExamples id={id} schema={schema} />

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,5 +1,5 @@
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import {
   ariaDescribedByIds,
   descriptionId,
@@ -7,10 +7,23 @@ import {
   labelValue,
   schemaRequiresTrueValue,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the CheckboxWidget. */
+export interface CheckboxWidgetMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the CheckboxWidget. */
+  rjsfSlotProps?: {
+    /** Props applied to the individual `Checkbox` component. */
+    checkbox?: CheckboxProps;
+    /** Props applied to the `FormControlLabel` component wrapping the checkbox. */
+    formControlLabel?: FormControlLabelProps;
+  };
+}
 
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
@@ -54,6 +67,8 @@ export default function CheckboxWidget<
   const _onFocus: React.FocusEventHandler<HTMLButtonElement> = () => onFocus(id, value);
   const description = options.description ?? schema.description;
 
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, CheckboxWidgetMuiProps>(options);
+
   return (
     <>
       {!hideLabel && description && (
@@ -66,6 +81,8 @@ export default function CheckboxWidget<
         />
       )}
       <FormControlLabel
+        {...otherMuiProps}
+        {...muiSlotProps?.formControlLabel}
         control={
           <Checkbox
             id={id}
@@ -78,6 +95,7 @@ export default function CheckboxWidget<
             onBlur={_onBlur}
             onFocus={_onFocus}
             aria-describedby={ariaDescribedByIds(id)}
+            {...muiSlotProps?.checkbox}
           />
         }
         label={labelValue(label, hideLabel, false)}

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,21 +1,37 @@
 import { ChangeEvent, FocusEvent } from 'react';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormGroup from '@mui/material/FormGroup';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
 import FormLabel from '@mui/material/FormLabel';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
+  GenericObjectType,
   WidgetProps,
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the CheckboxesWidget. */
+export interface CheckboxesWidgetMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the CheckboxesWidget. */
+  rjsfSlotProps?: {
+    /** Props applied to the `FormGroup` container. */
+    formGroup?: FormGroupProps;
+    /** Props applied to the individual `Checkbox` components. */
+    checkbox?: CheckboxProps;
+    /** Props applied to the `FormControlLabel` components wrapping each checkbox. */
+    formControlLabel?: FormControlLabelProps;
+  };
+}
 
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
  *  It is typically used to represent an array of enums.
@@ -26,22 +42,24 @@ export default function CheckboxesWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->({
-  label,
-  hideLabel,
-  id,
-  htmlName,
-  disabled,
-  options,
-  value,
-  autofocus,
-  readonly,
-  required,
-  onChange,
-  onBlur,
-  onFocus,
-}: WidgetProps<T, S, F>) {
+>(props: WidgetProps<T, S, F>) {
+  const {
+    label,
+    hideLabel,
+    id,
+    htmlName,
+    disabled,
+    options,
+    value,
+    autofocus,
+    readonly,
+    required,
+    onChange,
+    onBlur,
+    onFocus,
+  } = props;
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const _onChange =
@@ -55,9 +73,11 @@ export default function CheckboxesWidget<
     };
 
   const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
+
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, CheckboxesWidgetMuiProps>(options);
 
   return (
     <>
@@ -67,13 +87,14 @@ export default function CheckboxesWidget<
         </FormLabel>,
         hideLabel,
       )}
-      <FormGroup id={id} row={!!inline}>
+      <FormGroup {...otherMuiProps} {...muiSlotProps?.formGroup} id={id} row={!!inline}>
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index: number) => {
             const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
             const checkbox = (
               <Checkbox
+                {...muiSlotProps?.checkbox}
                 id={optionId(id, index)}
                 name={htmlName || id}
                 checked={checked}
@@ -85,7 +106,14 @@ export default function CheckboxesWidget<
                 aria-describedby={ariaDescribedByIds(id)}
               />
             );
-            return <FormControlLabel control={checkbox} key={index} label={option.label} />;
+            return (
+              <FormControlLabel
+                {...muiSlotProps?.formControlLabel}
+                control={checkbox}
+                key={index}
+                label={option.label}
+              />
+            );
           })}
       </FormGroup>
     </>

package/src/DescriptionField/DescriptionField.tsx

@@ -1,6 +1,23 @@
-import Typography from '@mui/material/Typography';
-import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import {
+  DescriptionFieldProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
 import { RichDescription } from '@rjsf/core';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the DescriptionField. */
+export interface DescriptionFieldMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the DescriptionField. */
+  rjsfSlotProps?: {
+    /** Props applied to the `Typography` element used for the description. */
+    descTypography?: TypographyProps;
+  };
+}
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
@@ -12,9 +29,14 @@ export default function DescriptionField<
   F extends FormContextType = any,
 >(props: DescriptionFieldProps<T, S, F>) {
   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;
+
   if (description) {
     return (
-      <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }}>
+      <Typography id={id} variant='subtitle2' style={{ marginTop: '5px' }} {...muiSlotProps?.descTypography}>
         <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
       </Typography>
     );

package/src/ErrorList/ErrorList.tsx

@@ -1,12 +1,42 @@
 import ErrorIcon from '@mui/icons-material/Error';
-import Box from '@mui/material/Box';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Paper from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import Box, { BoxProps } from '@mui/material/Box';
+import List, { ListProps } from '@mui/material/List';
+import ListItem, { ListItemProps } from '@mui/material/ListItem';
+import ListItemIcon, { ListItemIconProps } from '@mui/material/ListItemIcon';
+import ListItemText, { ListItemTextProps } from '@mui/material/ListItemText';
+import Paper, { PaperProps } from '@mui/material/Paper';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import {
+  ErrorListProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the ErrorList. */
+export interface ErrorListMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the ErrorList. */
+  rjsfSlotProps?: {
+    /** Props applied to the outermost `Paper` component. */
+    errorPaper?: PaperProps;
+    /** Props applied to the `Box` container. */
+    errorBox?: BoxProps;
+    /** Props applied to the `Typography` element for the title. */
+    errorTypography?: TypographyProps;
+    /** Props applied to the `List` container holding the errors. */
+    errorList?: ListProps;
+    /** Props applied to each `ListItem` representing an error. */
+    errorListItem?: ListItemProps;
+    /** Props applied to each `ListItemIcon` representing the error icon. */
+    errorListItemIcon?: ListItemIconProps;
+    /** Props applied to each `ListItemText` representing the error message. */
+    errorListItemText?: ListItemTextProps;
+  };
+}
 
 /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
  *
@@ -15,20 +45,27 @@ import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, Translat
 export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   errors,
   registry,
+  uiSchema,
 }: ErrorListProps<T, S, F>) {
   const { translateString } = registry;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ErrorListMuiProps>(uiOptions);
+
   return (
-    <Paper elevation={2}>
-      <Box mb={2} p={2}>
-        <Typography variant='h6'>{translateString(TranslatableString.ErrorsLabel)}</Typography>
-        <List dense={true}>
+    <Paper elevation={2} {...muiSlotProps?.errorPaper}>
+      <Box mb={2} p={2} {...muiSlotProps?.errorBox}>
+        <Typography variant='h6' {...muiSlotProps?.errorTypography}>
+          {translateString(TranslatableString.ErrorsLabel)}
+        </Typography>
+        <List dense={true} {...muiSlotProps?.errorList}>
           {errors.map((error, i: number) => {
             return (
-              <ListItem key={i}>
-                <ListItemIcon>
+              <ListItem key={i} {...muiSlotProps?.errorListItem}>
+                <ListItemIcon {...muiSlotProps?.errorListItemIcon}>
                   <ErrorIcon color='error' />
                 </ListItemIcon>
-                <ListItemText primary={error.stack} />
+                <ListItemText primary={error.stack} {...muiSlotProps?.errorListItemText} />
               </ListItem>
             );
           })}