reactjs 分页RTL下一个和上一个箭头指向错误的方向材料uiReact

eoxn13cs  于 2023-04-29  发布在  React
关注(0)|答案(3)|浏览(118)

与这个问题有关
https://github.com/mui/material-ui/issues/20193
分页箭头在RTL方向上反向工作

uplii1fm

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

a1o7rhls

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}
                  />
                )}
              />
dbf7pr2w

dbf7pr2w3#

只需通过以下代码更改主题:

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  components: {
    MuiPagination: {
      defaultProps: {
        dir: "ltr",
      },
    },
  },
});

然后使用此代码更改箭头:

<Pagination
                count={pageCount}
                page={page}
                onChange={(e, newPage: number) => setPage(newPage)}
                renderItem={item => (
                  <PaginationItem
                    components={{ previous: ArrowForward, next: ArrowBack }}
                    {...item}
                  />
                )}
              />

相关问题