I would like to customize the color of the text in Material UI's pagination component. Specifically, I want the action button to be white and the text portion to be grey, similar to the left action arrow in the image below. Is there a way for me to achieve this customization and have control over the color of the text?
https://i.sstatic.net/bwEl2.png
import React from 'react';
import TablePagination from '@material-ui/core/TablePagination';
import PropTypes from 'prop-types';
import { withTheme, withStyles } from '@material-ui/core/styles';
const styles = theme => ({
root: {
flexShrink: 0,
color: theme.palette.common.white,
marginLeft: theme.spacing.unit * 2.5,
},
});
const PortfolioPagination = ({
numOfItems, rowsPerPage, page, handleChangePage, classes
}) => {
return (
<div >
<TablePagination
component="div"
className={classes.root}
count={numOfItems}
page={page}
onChangePage={handleChangePage}
rowsPerPageOptions={[]}
rowsPerPage={rowsPerPage} />
</div>
);
};
PortfolioPagination.defaultProps = {
};
PortfolioPagination.propTypes = {
classes: PropTypes.object.isRequired,
numOfItems: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
handleChangePage: PropTypes.func.isRequired,
};
export default withTheme()(withStyles(styles)(PortfolioPagination));