与这个问题有关https://github.com/mui/material-ui/issues/20193分页箭头在RTL方向上反向工作
uplii1fm1#
来自Mui文档:支持从右到左的语言,如阿拉伯语、波斯语或希伯来语。要更改MUI组件的方向,必须执行以下步骤。文档和演示:https://mui.com/material-ui/guides/right-to-left/#demoRTL中的Pagination演示:https://codesandbox.io/s/direction-material-demo-forked-zdgsi8?file=/demo.js
Mui
RTL
Pagination
a1o7rhls2#
你可以像这样改变箭头图标:上一个按钮将其更改为前进按钮,下一个按钮将其更改为后退按钮:)享受!!XD参考更改图标: www.example.com
<Pagination count={pageCount} page={page} onChange={(e, newPage: number) => setPage(newPage)} renderItem={item => ( <PaginationItem components={{ previous: ArrowForward, next: ArrowBack }} {...item} /> )} />
dbf7pr2w3#
只需通过以下代码更改主题:
import { createTheme } from "@mui/material/styles"; export const theme = createTheme({ components: { MuiPagination: { defaultProps: { dir: "ltr", }, }, }, });
然后使用此代码更改箭头:
3条答案
按热度按时间uplii1fm1#
来自
Mui
文档:支持从右到左的语言,如阿拉伯语、波斯语或希伯来语。要更改MUI组件的方向,必须执行以下步骤。
文档和演示:
https://mui.com/material-ui/guides/right-to-left/#demo
RTL
中的Pagination
演示:https://codesandbox.io/s/direction-material-demo-forked-zdgsi8?file=/demo.js
a1o7rhls2#
你可以像这样改变箭头图标:上一个按钮将其更改为前进按钮,下一个按钮将其更改为后退按钮:)享受!!XD
参考更改图标: www.example.com
dbf7pr2w3#
只需通过以下代码更改主题:
然后使用此代码更改箭头: