CODEWITHSUNDEEP
reactjsmaterial-ui
Thilina Sampath
Thilina Sampath

Reputation: 3775

Material-UI: You are using the typography variant

I develop a web app using react and Material-UI and react. when I use pagination I got below error. 

index.js:1452 Warning: Material-UI: You are using the typography variant caption which will be restyled in the next major release. 
Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2

I use below way in pagination in my code

import TablePagination from '@material-ui/core/TablePagination';

<TablePagination
    component="div"
    count={this.handleChangeFilter(searchedVal).length}
    rowsPerPage={rowsPerPage}
    page={page}
    backIconButtonProps={{
        'aria-label': 'Previous Page',
    }}
    nextIconButtonProps={{
        'aria-label': 'Next Page',
    }}
    onChangePage={this.handleChangePage}
    onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>

please tell me how slove it error image in below

enter image description here

Upvotes: 2

Views: 8262

Answers (3)

Root
Root

Reputation: 2361

This error means the typography will change in the next version ,so you should migrate to the next version.The https://v3.mui.com/style/typography/#migration-to-typography-v2 give you a guide on how to migrate to the next version by adding this:

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
});

Upvotes: 11

Mary Chew
Mary Chew

Reputation: 1

I faced the same problem and I found this solution that really works!

Check out the link here: https://stackoverflow.com/a/54668516/10120050

Upvotes: 0

Otti
Otti

Reputation: 404

If you are using createMuiTheme, you should provide this new theme in the following way:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import TablePagination from '@material-ui/core/TablePagination';

const theme = createMuiTheme({
    typography: {
        useNextVariants: true,
    },
});

export default class Sample extends PureComponent {
    render(){
        return(
            <MuiThemeProvider theme={theme}>
                <Tablepagination/> //add your pagination setup
            </MuiThemeProvider>
        )
    }
}

Upvotes: 2

Related Questions