From e327b831498b5a6ddaa2f1233f7b9327d2ead5b3 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 14 Nov 2019 10:31:44 +0100
Subject: [PATCH] Fix Field in form does not like the variant prop

Closes #3980
---
 docs/CreateEdit.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
index 8eab93ba4f2..498daa86b27 100644
--- a/docs/CreateEdit.md
+++ b/docs/CreateEdit.md
@@ -873,6 +873,23 @@ export const PostEdit = (props) => (
 );
 ```
 
+**Tip**: If your form contains not only Inputs but also Fields, the injection of the `variant` property to the form children will cause a React warning. You'll need to wrap every Field component in another component to ignore the injected `variant` prop, as follows:
+
+```diff
++const TextFieldInForm = ({ variant, ...props }) => <TextField {...props} />;
++TextFieldInForm.defaultProps = TextField.defaultProps;
+
+```jsx
+export const PostEdit = (props) => (
+    <Edit {...props}>
+        <SimpleForm variant="standard">
+-           <TextField source="title" />
++           <TextFieldInForm source="title" />
+        </SimpleForm>
+    </Edit>
+);
+```
+
 ## Margin
 
 By default, react-admin input components use the Material Design "dense" margin. If you want to use the "normal" or "none" margins, you can either set the `margin` prop on each Input component individually, or set the `margin` prop directly on the Form component. In that case, the Form component will transmit the `margin` to each Input.