下面的示例是文档中Custom Pagination Actions example 的副本，但您的问题中指出了样式更改。
我对演示所做的更改是添加您的纸张背景样式和MenuItem 悬停效果的样式（否则悬停不可见）：
const useStyles2 = makeStyles({
selectDropdown: { color: "#fff", backgroundColor: "#1b1f38" },
menuItem: {
"&:hover": {
backgroundColor: "#3b3f58"
}
}
});
要将selectDropdown 类应用于菜单Paper，请在SelectProps 中使用MenuProps。可以更直接地应用menuItem 样式（均如下所示）。
<TablePagination
SelectProps={{
MenuProps: { classes: { paper: classes.selectDropdown } }
}}
classes={{ menuItem: classes.menuItem }}
...
/>
与原始文档演示相比，另一个变化是我从SelectProps 中删除了native: true（这种自定义样式方法均不适用于本机选择，并且您问题中的示例未使用本机选择）。
这是沙盒的完整代码：
import React from "react";
import PropTypes from "prop-types";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableFooter from "@material-ui/core/TableFooter";
import TablePagination from "@material-ui/core/TablePagination";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import IconButton from "@material-ui/core/IconButton";
import FirstPageIcon from "@material-ui/icons/FirstPage";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import LastPageIcon from "@material-ui/icons/LastPage";
const useStyles1 = makeStyles(theme => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5)
}
}));
function TablePaginationActions(props) {
const classes = useStyles1();
const theme = useTheme();
const { count, page, rowsPerPage, onChangePage } = props;
const handleFirstPageButtonClick = event => {
onChangePage(event, 0);
};
const handleBackButtonClick = event => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = event => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = event => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={handleBackButtonClick}
disabled={page === 0}
aria-label="previous page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
TablePaginationActions.propTypes = {
count: PropTypes.number.isRequired,
onChangePage: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired
};
function createData(name, calories, fat) {
return { name, calories, fat };
}
const rows = [
createData("Cupcake", 305, 3.7),
createData("Donut", 452, 25.0),
createData("Eclair", 262, 16.0),
createData("Frozen yoghurt", 159, 6.0),
createData("Gingerbread", 356, 16.0),
createData("Honeycomb", 408, 3.2),
createData("Ice cream sandwich", 237, 9.0),
createData("Jelly Bean", 375, 0.0),
createData("KitKat", 518, 26.0),
createData("Lollipop", 392, 0.2),
createData("Marshmallow", 318, 0),
createData("Nougat", 360, 19.0),
createData("Oreo", 437, 18.0)
].sort((a, b) => (a.calories < b.calories ? -1 : 1));
const useStyles2 = makeStyles({
table: {
minWidth: 500
},
selectDropdown: { color: "#fff", backgroundColor: "#1b1f38" },
menuItem: {
"&:hover": {
backgroundColor: "#3b3f58"
}
}
});
export default function CustomPaginationActionsTable() {
const classes = useStyles2();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const emptyRows =
rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = event => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="custom pagination table">
<TableBody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map(row => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.calories}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.fat}
</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
MenuProps: { classes: { paper: classes.selectDropdown } }
}}
classes={{ menuItem: classes.menuItem }}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);
}
相关（也是菜单文件的样式）答案：(material-ui) Apply max-height to <Select> children
相关文档：