Make default props themeable

Author: fzaninotto

docs/RecordField.md

@@ -142,13 +142,15 @@ When the record contains no value for the `source` prop, `RecordField` renders a
 
 If you use the `render` prop, you can even use a React element as `empty` value.
 
+{% raw %}
 ```jsx
 <RecordField
     source="title"
     empty={<span style={{ color: 'red' }}>Missing title</span>}
     render={record => record.title}
 />
 ```
+{% endraw %}
 
 Note that `empty` is ignored when you pass a custom field component as child. In this case, it's the child's responsibility to handle the empty value.
 
@@ -352,6 +354,29 @@ But since you generally need to do it for several fields, it's preferable to do
 ```
 {% endraw %}
 
+**Tip**: If you want all your fields to be displayed inline, you can define the default variant for `RecordField` [in a custom application Theme](https://marmelab.com/react-admin/AppTheme.html#theming-individual-components):
+
+```jsx
+import { defaultTheme } from 'react-admin';
+import { deepmerge } from '@mui/utils';
+
+const theme = deepmerge(defaultTheme, {
+    components: {
+        RaRecordField: {
+            defaultProps: {
+                variant: 'inline',
+            },
+        },
+    },
+});
+
+const App = () => (
+    <Admin theme={theme}>
+        // ...
+    </Admin>
+);
+```
+
 ## TypeScript
 
 `<RecordField>` is a generic component. You can pass a type parameter to get hints for the `source` prop and type safety for the `record` argument of the `render` function.

packages/ra-ui-materialui/src/field/RecordField.stories.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Stack, Typography } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import {
     I18nContextProvider,
     RecordContextProvider,
     ResourceContext,
 } from 'ra-core';
+
 import { NumberField, TextField } from '.';
 import { RecordField } from './RecordField';
 
@@ -182,17 +184,40 @@ export const Variant = () => (
                 />
             </Stack>
             <Typography gutterBottom>Custom label width</Typography>
-            <Stack sx={{ '& .RaRecordField-label': { width: 200 } }}>
-                <RecordField variant="inline" source="id" />
-                <RecordField variant="inline" source="title" />
-                <RecordField variant="inline" source="author" />
-                <RecordField variant="inline" source="summary" />
-                <RecordField
-                    variant="inline"
-                    source="year"
-                    field={NumberField}
-                />
-            </Stack>
+            <ThemeProvider
+                theme={createTheme({
+                    components: {
+                        RaRecordField: {
+                            defaultProps: {
+                                variant: 'inline',
+                            },
+                        },
+                    },
+                })}
+            >
+                <Stack sx={{ '& .RaRecordField-label': { width: 200 } }}>
+                    <RecordField variant="inline" source="id" />
+                    <RecordField variant="inline" source="title" />
+                    <RecordField variant="inline" source="author" />
+                    <RecordField variant="inline" source="summary" />
+                    <RecordField
+                        variant="inline"
+                        source="year"
+                        field={NumberField}
+                    />
+                </Stack>
+                <Typography gutterBottom>Default variant via theme</Typography>
+                <Stack>
+                    <RecordField
+                        source="id"
+                        TypographyProps={{ sx: { width: 200 } }}
+                    />
+                    <RecordField source="title" />
+                    <RecordField source="author" />
+                    <RecordField source="summary" />
+                    <RecordField source="year" field={NumberField} />
+                </Stack>
+            </ThemeProvider>
         </RecordContextProvider>
     </ResourceContext.Provider>
 );

packages/ra-ui-materialui/src/field/RecordField.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { type ReactNode, type ElementType } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, type ComponentsOverrides } from '@mui/material/styles';
 import {
     Stack,
     Typography,
+    useThemeProps,
     type StackProps,
     type SxProps,
     type TypographyProps,
@@ -21,21 +22,30 @@ import clsx from 'clsx';
 
 import { TextField } from './TextField';
 
+const PREFIX = 'RaRecordField';
+
 export const RecordField = <
     RecordType extends Record<string, any> = Record<string, any>,
->({
-    children,
-    className,
-    empty,
-    field,
-    label,
-    render,
-    source,
-    sx,
-    TypographyProps,
-    variant,
-    ...rest
-}: RecordFieldProps<RecordType>) => {
+>(
+    inProps: RecordFieldProps<RecordType>
+) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+    const {
+        children,
+        className,
+        empty,
+        field,
+        label,
+        render,
+        source,
+        sx,
+        TypographyProps,
+        variant,
+        ...rest
+    } = props;
     const resource = useResourceContext();
     const record = useRecordContext<RecordType>();
     const translate = useTranslate();
@@ -113,8 +123,6 @@ export interface RecordFieldProps<
     variant?: 'default' | 'inline';
 }
 
-const PREFIX = 'RaRecordField';
-
 export const RecordFieldClasses = {
     label: `${PREFIX}-label`,
     value: `${PREFIX}-value`,
@@ -142,3 +150,22 @@ const Root = styled(Stack, {
         flex: 1,
     },
 }));
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        RaRecordField: 'root' | 'content' | 'button' | 'icon';
+    }
+
+    interface ComponentsPropsList {
+        RaRecordField: Partial<RecordFieldProps>;
+    }
+
+    interface Components {
+        RaRecordField?: {
+            defaultProps?: ComponentsPropsList['RaRecordField'];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >['RaRecordField'];
+        };
+    }
+}