Themes

/**
 * Material UI v4 theme configuration with Mui4FormWrapper and ThemeCommon
 * Integrates with @material-ui/core components and icons
 */
declare const Theme: ThemeProps;

import { withTheme } from "@rjsf/core";
import Theme from "@rjsf/material-ui/v4";

const Form = withTheme(Theme);

/**
 * Explicit Material UI v4 theme (alias for Theme)
 */
declare const Theme4: ThemeProps;

/**
 * Material UI v5 theme configuration with Mui5FormWrapper and ThemeCommon
 * Integrates with @mui/material components and icons
 */
declare const Theme5: ThemeProps;

import { withTheme } from "@rjsf/core";
import Theme from "@rjsf/material-ui/v5";

const Form = withTheme(Theme);

interface ThemeProps {
  /** Internal form wrapper component for context provision */
  _internalFormWrapper?: React.ComponentType<any>;
  /** Template for array fields */
  ArrayFieldTemplate?: React.ComponentType<ArrayFieldTemplateProps>;
  /** Template for individual fields */
  FieldTemplate?: React.ComponentType<FieldTemplateProps>;
  /** Template for object fields */
  ObjectFieldTemplate?: React.ComponentType<ObjectFieldTemplateProps>;
  /** Collection of custom field components */
  fields?: { [key: string]: React.ComponentType<FieldProps> };
  /** Collection of custom widget components */
  widgets?: { [key: string]: React.ComponentType<WidgetProps> };
  /** Error list component */
  ErrorList?: React.ComponentType<ErrorListProps>;
}

interface ThemeCommonConfig {
  /** Array field template with Material UI styling */
  ArrayFieldTemplate: React.ComponentType<ArrayFieldTemplateProps>;
  /** Combined fields from default registry and custom fields */
  fields: { [key: string]: React.ComponentType<FieldProps> };
  /** Individual field template */
  FieldTemplate: React.ComponentType<FieldTemplateProps>;
  /** Object field template */
  ObjectFieldTemplate: React.ComponentType<ObjectFieldTemplateProps>;
  /** Combined widgets from default registry and custom widgets */
  widgets: { [key: string]: React.ComponentType<WidgetProps> };
  /** Error list component */
  ErrorList: React.ComponentType<ErrorListProps>;
}

/**
 * Form wrapper that provides @material-ui/core v4 components via MuiComponentContext
 * Shows warning if Material UI v4 dependencies are not available
 */
declare const Mui4FormWrapper: React.ForwardRefExoticComponent<
  React.PropsWithChildren<HTMLFormElement> & React.RefAttributes<HTMLBaseElement>
>;

/**
 * Form wrapper that provides @mui/material v5 components via MuiComponentContext
 * Shows warning if Material UI v5 dependencies are not available
 */
declare const Mui5FormWrapper: React.ForwardRefExoticComponent<
  React.PropsWithChildren<HTMLFormElement> & React.RefAttributes<HTMLBaseElement>
>;

import { withTheme } from "@rjsf/core";
import { Theme } from "@rjsf/material-ui/v5";

const customTheme = {
  ...Theme,
  widgets: {
    ...Theme.widgets,
    CustomWidget: MyCustomWidget,
  },
  fields: {
    ...Theme.fields,
    CustomField: MyCustomField,
  },
};

const CustomForm = withTheme(customTheme);

import { ThemeProps } from "@rjsf/core";
import { Theme5 } from "@rjsf/material-ui";

const advancedTheme: ThemeProps = {
  ...Theme5,
  FieldTemplate: CustomFieldTemplate,
  ArrayFieldTemplate: CustomArrayTemplate,
  ErrorList: CustomErrorList,
  widgets: {
    ...Theme5.widgets,
    TextWidget: EnhancedTextWidget,
    SelectWidget: EnhancedSelectWidget,
  },
};

const AdvancedForm = withTheme(advancedTheme);

import { Theme as Theme4, Theme5 } from "@rjsf/material-ui";

function useThemeForVersion(version: 4 | 5) {
  return version === 5 ? Theme5 : Theme4;
}

function AdaptiveForm({ materialUIVersion = 5 }) {
  const theme = useThemeForVersion(materialUIVersion);
  const Form = withTheme(theme);
  
  return <Form schema={schema} />;
}

/**
 * Error display component using Paper, List, and ErrorIcon
 * @param props - ErrorListProps containing validation errors
 * @returns JSX.Element
 */
declare const ErrorList: React.ComponentType<ErrorListProps>;

interface ErrorListProps {
  /** List of validation errors */
  errors?: RJSFValidationError[];
  /** Error schema object */
  errorSchema?: ErrorSchema;
  /** Schema being validated */
  schema?: JSONSchema7;
  /** UI schema */
  uiSchema?: UiSchema;
  /** Form context */
  formContext?: any;
}

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Form from "@rjsf/material-ui/v5";

const muiTheme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function ThemedForm() {
  return (
    <ThemeProvider theme={muiTheme}>
      <Form schema={schema} />
    </ThemeProvider>
  );
}

import { Theme as Theme4, Theme5 } from "@rjsf/material-ui";
import { withTheme } from "@rjsf/core";

const Form4 = withTheme(Theme4);
const Form5 = withTheme(Theme5);

function MultiVersionForms() {
  return (
    <>
      <h2>Material UI v4 Form</h2>
      <Form4 schema={schema4} />
      
      <h2>Material UI v5 Form</h2>
      <Form5 schema={schema5} />
    </>
  );
}

import { Theme5 } from "@rjsf/material-ui";

function createFeatureTheme(features: FeatureFlags): ThemeProps {
  const theme = { ...Theme5 };
  
  if (features.enhancedValidation) {
    theme.ErrorList = EnhancedErrorList;
  }
  
  if (features.advancedWidgets) {
    theme.widgets = {
      ...theme.widgets,
      DateTimeWidget: AdvancedDateTimeWidget,
    };
  }
  
  return theme;
}

const FeatureForm = withTheme(createFeatureTheme({
  enhancedValidation: true,
  advancedWidgets: false,
}));