Allow to set default props for Create, Edit and Show.

Author: Madeorsk

packages/ra-ui-materialui/src/detail/Create.tsx

@@ -7,6 +7,7 @@ import {
     RaRecord,
     useCheckMinimumRequiredProps,
 } from 'ra-core';
+import { useThemeProps } from '@mui/material/styles';
 
 import { CreateView, CreateViewProps } from './CreateView';
 import { Loading } from '../layout';
@@ -58,8 +59,13 @@ export const Create = <
     RecordType extends Omit<RaRecord, 'id'> = any,
     ResultRecordType extends RaRecord = RecordType & { id: Identifier },
 >(
-    props: CreateProps<RecordType, Error, ResultRecordType>
+    inProps: CreateProps<RecordType, Error, ResultRecordType>
 ): ReactElement => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     useCheckMinimumRequiredProps('Create', ['children'], props);
     const {
         resource,
@@ -100,3 +106,5 @@ export interface CreateProps<
         Omit<CreateViewProps, 'children'> {}
 
 const defaultLoading = <Loading />;
+
+const PREFIX = 'RaCreate'; // Types declared in CreateView.

packages/ra-ui-materialui/src/detail/CreateView.tsx

@@ -12,6 +12,7 @@ import { useCreateContext } from 'ra-core';
 import clsx from 'clsx';
 
 import { Title } from '../layout';
+import { CreateProps } from './Create';
 
 export const CreateView = (inProps: CreateViewProps) => {
     const props = useThemeProps({
@@ -94,7 +95,7 @@ declare module '@mui/material/styles' {
     }
 
     interface ComponentsPropsList {
-        RaCreate: Partial<CreateViewProps>;
+        RaCreate: Partial<CreateProps>;
     }
 
     interface Components {

packages/ra-ui-materialui/src/detail/Edit.tsx

@@ -5,6 +5,8 @@ import {
     RaRecord,
     EditBaseProps,
 } from 'ra-core';
+import { useThemeProps } from '@mui/material/styles';
+
 import { EditView, EditViewProps } from './EditView';
 import { Loading } from '../layout';
 
@@ -54,8 +56,13 @@ import { Loading } from '../layout';
  * export default App;
  */
 export const Edit = <RecordType extends RaRecord = any>(
-    props: EditProps<RecordType, Error>
+    inProps: EditProps<RecordType, Error>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     useCheckMinimumRequiredProps('Edit', ['children'], props);
     const {
         resource,
@@ -91,3 +98,5 @@ export interface EditProps<RecordType extends RaRecord = any, ErrorType = Error>
         Omit<EditViewProps, 'children'> {}
 
 const defaultLoading = <Loading />;
+
+const PREFIX = 'RaEdit'; // Types declared in EditView.

packages/ra-ui-materialui/src/detail/EditView.tsx

@@ -14,6 +14,7 @@ import { useEditContext, useResourceDefinition } from 'ra-core';
 
 import { EditActions } from './EditActions';
 import { Title } from '../layout';
+import { EditProps } from './Edit';
 
 const defaultActions = <EditActions />;
 
@@ -106,7 +107,7 @@ declare module '@mui/material/styles' {
     }
 
     interface ComponentsPropsList {
-        RaEdit: Partial<EditViewProps>;
+        RaEdit: Partial<EditProps>;
     }
 
     interface Components {

packages/ra-ui-materialui/src/detail/Show.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import { ShowBase, RaRecord, ShowBaseProps } from 'ra-core';
+import { useThemeProps } from '@mui/material/styles';
+
 import { ShowView, ShowViewProps } from './ShowView';
 import { Loading } from '../layout';
 
@@ -43,40 +45,53 @@ import { Loading } from '../layout';
  * );
  * export default App;
  *
- * @param {ShowProps} props
- * @param {ReactElement|false} props.actions An element to display above the page content, or false to disable actions.
- * @param {string} props.className A className to apply to the page content.
- * @param {ElementType} props.component The component to use as root component (div by default).
- * @param {boolean} props.emptyWhileLoading Do not display the page content while loading the initial data.
- * @param {string} props.id The id of the resource to display (grabbed from the route params if not defined).
- * @param {Object} props.queryClient Options to pass to the react-query useQuery hook.
- * @param {string} props.resource The resource to fetch from the data provider (grabbed from the ResourceContext if not defined).
- * @param {Object} props.sx Custom style object.
- * @param {ElementType|string} props.title The title of the page. Defaults to `#{resource} #${id}`.
+ * @param {ShowProps} inProps
+ * @param {ReactElement|false} inProps.actions An element to display above the page content, or false to disable actions.
+ * @param {string} inProps.className A className to apply to the page content.
+ * @param {ElementType} inProps.component The component to use as root component (div by default).
+ * @param {boolean} inProps.emptyWhileLoading Do not display the page content while loading the initial data.
+ * @param {string} inProps.id The id of the resource to display (grabbed from the route params if not defined).
+ * @param {Object} inProps.queryClient Options to pass to the react-query useQuery hook.
+ * @param {string} inProps.resource The resource to fetch from the data provider (grabbed from the ResourceContext if not defined).
+ * @param {Object} inProps.sx Custom style object.
+ * @param {ElementType|string} inProps.title The title of the page. Defaults to `#{resource} #${id}`.
  *
  * @see ShowView for the actual rendering
  */
-export const Show = <RecordType extends RaRecord = any>({
-    id,
-    resource,
-    queryOptions,
-    disableAuthentication,
-    loading = defaultLoading,
-    ...rest
-}: ShowProps<RecordType>): ReactElement => (
-    <ShowBase<RecordType>
-        id={id}
-        disableAuthentication={disableAuthentication}
-        queryOptions={queryOptions}
-        resource={resource}
-        loading={loading}
-    >
-        <ShowView {...rest} />
-    </ShowBase>
-);
+export const Show = <RecordType extends RaRecord = any>(
+    inProps: ShowProps<RecordType>
+): ReactElement => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
+    const {
+        id,
+        resource,
+        queryOptions,
+        disableAuthentication,
+        loading = defaultLoading,
+        ...rest
+    } = props;
+
+    return (
+        <ShowBase<RecordType>
+            id={id}
+            disableAuthentication={disableAuthentication}
+            queryOptions={queryOptions}
+            resource={resource}
+            loading={loading}
+        >
+            <ShowView {...rest} />
+        </ShowBase>
+    );
+};
 
 export interface ShowProps<RecordType extends RaRecord = any>
     extends ShowBaseProps<RecordType>,
         Omit<ShowViewProps, 'children'> {}
 
 const defaultLoading = <Loading />;
+
+const PREFIX = 'RaShow'; // Types declared in ShowView.

packages/ra-ui-materialui/src/detail/ShowView.tsx

@@ -12,6 +12,7 @@ import clsx from 'clsx';
 import { useShowContext, useResourceDefinition } from 'ra-core';
 import { ShowActions } from './ShowActions';
 import { Title } from '../layout';
+import { ShowProps } from './Show';
 
 const defaultActions = <ShowActions />;
 
@@ -101,7 +102,7 @@ declare module '@mui/material/styles' {
     }
 
     interface ComponentsPropsList {
-        RaShow: Partial<ShowViewProps>;
+        RaShow: Partial<ShowProps>;
     }
 
     interface Components {