diff --git a/packages/ra-ui-materialui/src/list/PaginationActions.js b/packages/ra-ui-materialui/src/list/PaginationActions.js index 633f6c44763..7dd34ce644a 100644 --- a/packages/ra-ui-materialui/src/list/PaginationActions.js +++ b/packages/ra-ui-materialui/src/list/PaginationActions.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronRight from '@material-ui/icons/ChevronRight'; import { useTranslate } from 'ra-core'; @@ -22,6 +22,7 @@ function PaginationActions(props) { const { page, rowsPerPage, count, onChangePage, color, size } = props; const classes = useStyles(props); const translate = useTranslate(); + const theme = useTheme(); /** * Warning: material-ui's page is 0-based */ @@ -126,7 +127,11 @@ function PaginationActions(props) { onClick={prevPage} className="previous-page" > - + {theme.direction === 'rtl' ? ( + + ) : ( + + )} {translate('ra.navigation.prev')} )} @@ -140,7 +145,11 @@ function PaginationActions(props) { className="next-page" > {translate('ra.navigation.next')} - + {theme.direction === 'rtl' ? ( + + ) : ( + + )} )} @@ -163,6 +172,7 @@ PaginationActions.propTypes = { rowsPerPage: PropTypes.number.isRequired, color: PropTypes.oneOf(['primary', 'secondary']), size: PropTypes.oneOf(['small', 'medium', 'large']), + theme: PropTypes.object, }; PaginationActions.defaultProps = {