【问题标题】：material ui pagination component text color to be grey材质ui分页组件文本颜色为灰色
【发布时间】：2021-07-03 18:24:29
【问题描述】：

我正在使用 Material UI 的分页组件，并且希望组件的文本部分为灰色。我想要的颜色是白色的动作按钮和灰色的文本部分。有什么办法可以让我决定文本部分的颜色吗？本质上希望文本像照片中的左操作箭头一样是灰色的。

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

【问题讨论】：

标签： css reactjs bootstrap-4 material-ui react-with-styles

【解决方案1】：

我最近遇到了同样的问题，并通过使用组件的样式自定义点解决了它。这是一个例子：

import { TablePagination } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  color: {
    color: "green"
  },
  leftIconButton: {
    color: "blue !important"
  },
  rightIconButton: {
    color: "red !important"
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <TablePagination
        classes={{
          root: classes.color
        }}
        backIconButtonProps={{ className: classes.leftIconButton }}
        nextIconButtonProps={{ className: classes.rightIconButton }}
        rowsPerPageOptions={5}
        component="div"
        count={10}
        rowsPerPage={5}
        page={1}
        onChangePage={() => {}}
        onChangeRowsPerPage={() => {}}
      />{" "}
    </div>
  );
}

现场演示

【讨论】：