Material-UI:您正在使用版式变体

时间:2018-10-11 04:07:19

标签: reactjs material-ui

我使用react和Material-UI开发React的Web应用程序。当我使用分页时,出现以下错误。

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

请告诉我下面的错误图片

enter image description here

3 个答案:

答案 0 :(得分:5)

此错误意味着排版将在下一版本中更改,因此您应迁移到下一版本。https://material-ui.com/style/typography#migration-to-typography-v2通过添加以下内容为您提供了有关如何迁移到下一版本的指南:

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

答案 1 :(得分: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>
        )
    }
}

答案 2 :(得分:0)

我遇到了同样的问题,我发现这种解决方案确实有效!

在此处查看链接: https://stackoverflow.com/a/54668516/10120050