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

5213

Following is my code React + MaterialUI code snippet

<Typography variant={'p'} weight={'400'} spacing={'big'}  className={classes.menuItems}>
    Users
</Typography>

Which is producing the following error

index.js:1 Warning: Failed prop type: Invalid prop `variant` of value `p` 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 Typography)
    in Typography (created by AmiLargeHeader)
    in div (created by AmiLargeHeader)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by AmiLargeHeader)
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar)) (created by AmiLargeHeader)
    in AmiLargeHeader (created by AmiHeader)
    in HiddenJs (created by WithWidth(HiddenJs))
    in WithWidth(HiddenJs) (created by Hidden)
    in Hidden (created by AmiHeader)
    in AmiHeader (created by Index)
    in Index (created by WithStyles(Index))
    in WithStyles(Index) (created by Connect(WithStyles(Index)))
    in Connect(WithStyles(Index)) (created by MyApp)
    in Provider (created by MyApp)
    in ThemeProvider (created by MyApp)
    in Container (created by MyApp)
    in MyApp (created by AppWithRedux)
    in AppWithRedux
    in Suspense

How can i fix this? All i want is a p typography

1 Answer

5 years ago by

variant is an enum of following

'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit'

You can use body1/ body2 but in case you want p tag only then directly use p tag like following

<p className={classes.menuItems}>
    Users
</p>
5 years ago by VD