[v3] Error message: Warning: Failed prop type: Invalid prop variant of value standard supplied to ForwardRef(Typography), expected one of ["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","button","overline","srOnly","inherit"].

[Dina-Lai]

I follow the v3 documents (https://marmelab.com/react-admin/doc/3.0-beta/CreateEdit.html#variant) to set the form style to be 'standard'.
It can work, but has the following error message:

Warning: Failed prop type: Invalid prop variant of value standard supplied to ForwardRef(Typography), expected one of ["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","button","overline","srOnly","inherit"].
in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
in WithStyles(ForwardRef(Typography)) (created by TextField)
in TextField (created by EnhancedTextField)
in EnhancedTextField (at PlanEdit.js:31)
in div (created by Labeled)
in div (created by ForwardRef(FormControl))
in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
in WithStyles(ForwardRef(FormControl)) (created by Labeled)
in Labeled (created by FormInput)
in div (created by FormInput)
in FormInput (created by SimpleFormView)
in div (created by ForwardRef(CardContent))
in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
in WithStyles(ForwardRef(CardContent)) (created by CardContentInner)
in CardContentInner (created by SimpleFormView)
in form (created by SimpleFormView)
in SimpleFormView (created by ReactFinalForm)
in ReactFinalForm (created by SimpleForm)
in SimpleForm (at PlanEdit.js:23)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
in WithStyles(ForwardRef(Card)) (created by EditView)
in div (created by EditView)
in div (created by EditView)
in EditView (created by Edit)
in Edit (at PlanEdit.js:22)
in Unknown (created by WithPermissions)
in WithPermissions (created by Context.Consumer)
in Route (created by ResourceRoutes)
in Switch (created by ResourceRoutes)
in ResourceRoutes (created by Resource)
in Resource (at App.js:27)
in Route (created by RoutesWithLayout)
in Switch (created by RoutesWithLayout)
in RoutesWithLayout (created by Context.Consumer)
in div (created by Layout)
in main (created by Layout)
in div (created by Layout)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by Context.Consumer)
in withRouter(WithStyles(Layout)) (created by ConnectFunction)
in ConnectFunction (created by LayoutWithTheme)
in ThemeProvider (created by LayoutWithTheme)
in LayoutWithTheme (at Layout/index.js:5)
in MyLayout (created by Context.Consumer)
in Route (created by CoreAdminRouter)
in Switch (created by CoreAdminRouter)
in div (created by CoreAdminRouter)
in CoreAdminRouter (created by Context.Consumer)
in Route (created by AdminUI)
in Switch (created by AdminUI)
in AdminUI (created by Admin)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Context.Consumer)
in ConnectedRouterWithContext (created by ConnectFunction)
in ConnectFunction (created by AdminContext)
in TranslationProvider (created by AdminContext)
in Provider (created by AdminContext)
in AdminContext (created by Admin)
in Admin (at App.js:18)
in App (at src/index.js:7)

Related code:

Here is my SimpleForm in my PlanEdit.js

export const PostEdit = (props) => (
    <Edit {...props}>
            <SimpleForm
                variant="standard"
                submitOnEnter={false}
                redirect={false}
            >
                <TextInput source="plan_name" resettable />
                <TextField source="site_id" label="Site for" />
            </SimpleForm>
    </Edit>
)

Environment

• React-admin version: 3.0.0-beta.6
• React version: 16.11.0
• Browser: Chrome

[fzaninotto]

Confirmed and reproduced, thanks. I don't think we can "fix" this problem by adding variant to the sanitizeRestProps function for Fields as there are legitimate uses of the variant prop in Typography.

I think it must be mentioned as a gotcha in the documentation for the variant prop in forms. The workaround is to wrap your Fields inside another component to ignore the injected variant prop:

const TextFieldInForm = ({ variant, ...props }) => <TextField {...props} />;
TextFieldInForm.defaultProps = TextField.defaultProps;

// then use TextFieldInForm instead of TextField

[fzaninotto]

fixed by #3984

[Dina-Lai]

Thanks a lot!!