Merge pull request #7721 from marmelab/7712-can-not-use-sxon-tabbedform

Add sx prop to TabbedForm and improve doc

Author: djhi

docs/TabbedForm.md

@@ -176,20 +176,20 @@ export const PostCreate = () => {
 
 Pass an `sx` prop to customize the style of the main component and the underlying elements.
 
-The most common usage is to limit the width of the form, to avoid long inputs on large screens:
-
 {% raw %}
 ```jsx
 export const PostCreate = () => (
     <Create>
-        <TabbedForm sx={{ maxWidth: 600 }}>
+        <TabbedForm sx={{ border: '1px solid red' }}>
             ...
         </TabbedForm>
     </Create>
 );
 ```
 {% endraw %}
 
+**Tip:** If you want to customize the _content_ of the tabs instead, for example to limit the width of the form, you should rather add an `sx` prop to the [`<FormTab>` component](#formtab).
+
 ## `syncWithLocation`
 
 When the user clicks on a tab header, react-admin changes the URL to enable the back button.

packages/ra-ui-materialui/src/form/TabbedForm.tsx

@@ -16,7 +16,7 @@ import {
 } from 'ra-core';
 import get from 'lodash/get';
 
-import { TabbedFormView } from './TabbedFormView';
+import { TabbedFormView, TabbedFormViewProps } from './TabbedFormView';
 import { useFormRootPath } from './useFormRootPath';
 
 /**
@@ -113,7 +113,8 @@ export interface TabbedFormProps
         Omit<
             HtmlHTMLAttributes<HTMLFormElement>,
             'defaultValue' | 'onSubmit' | 'children'
-        > {
+        >,
+        Partial<TabbedFormViewProps> {
     children: ReactNode;
     className?: string;
     defaultValues?: any;

packages/ra-ui-materialui/src/form/TabbedFormView.tsx

@@ -33,6 +33,7 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
         syncWithLocation = true,
         tabs = DefaultTabs,
         toolbar = DefaultToolbar,
+        ...rest
     } = props;
     const location = useLocation();
     const resolvedPath = useResolvedPath('');
@@ -58,7 +59,10 @@ export const TabbedFormView = (props: TabbedFormViewProps): ReactElement => {
         );
 
     return (
-        <Root className={clsx('tabbed-form', className)}>
+        <Root
+            className={clsx('tabbed-form', className)}
+            {...sanitizeRestProps(rest)}
+        >
             {syncWithLocation ? (
                 <Routes>
                     <Route path="/*" element={renderTabHeaders()} />
@@ -144,3 +148,5 @@ const Root = styled('div', {
         color: theme.palette.error.main,
     },
 }));
+
+const sanitizeRestProps = ({ record, resource, ...rest }: any) => rest;