material ui 分页组件文字颜色为灰色
material ui pagination component text color to be grey
我正在使用 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));
我最近遇到了同样的问题,使用组件的样式自定义点解决了。这是一个例子:
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>
);
}
现场演示
我正在使用 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));
我最近遇到了同样的问题,使用组件的样式自定义点解决了。这是一个例子:
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>
);
}