Material-UI: вы используете типографский вариант

Question

Я разрабатываю веб-приложение, использующее реагирование и пользовательский интерфейс материалов и реагирование.когда я использую нумерацию страниц, я получаю ошибку ниже.

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

Я использую ниже путь в разбивке по страницам в моем коде

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}
/>

, пожалуйста, скажите мне, как это ошибочно изображено ниже

Answer 1

Если вы используете createMuiTheme, вы должны предоставить эту новую тему следующим образом:

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

Answer 2

Я столкнулся с той же проблемой, и я нашел это решение, которое действительно работает!

Проверьте ссылку здесь: https://stackoverflow.com/a/54668516/10120050

Answer 3

Эта ошибка означает, что типография изменится в следующей версии, поэтому вам следует перейти на следующую версию.руководство по переходу на следующую версию, добавив следующее:

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