2

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

3
  • Please share snippets of your use of the Pagination component, and the version of Material-UI you are working with.
    – jagzviruz
    Commented Oct 11, 2018 at 5:32
  • yes, I used in the new version. Commented Oct 11, 2018 at 6:18
  • I will added code to pagination. Commented Oct 11, 2018 at 6:18

3 Answers 3

11

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,
  },
});
3
  • 1
    Actually this is a problem about the version about @material-ui/core/.I run an example in codesandbox.io/s/x38315w52p,first with the version 3.2.0,and I face this problem, then I change the version to 3.1.2,and the warning gone.In my opinion, it's just a warning, you can ignore it.However,if you want to make this gone, you can change the version of @material/core or you can read the this issue in github in github.com/mui-org/material-ui/releases/tag/v3.2.0.
    – Root
    Commented Oct 11, 2018 at 8:01
  • @ThilinaSampath if you found the solution, post it
    – Jan
    Commented Oct 12, 2018 at 4:51
  • I added typography to my createMuiTheme block and that did it for me
    – aqteifan
    Commented Jul 23, 2019 at 16:49
2

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>
        )
    }
}
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.