React Material UI 分页在 RTL 中无法正常工作

Question

我正在尝试使我的分页 rtl 但分页箭头未正确设置 rtl，我使用了此处提供的解决方案，但它不起作用。 有人可以帮我吗？ 如果有人可以提供帮助，我将不胜感激。

这是我的组件实现：

import React, { useState, useEffect, useMemo, useRef } from "react";
import TransactionsWithout220Service from "../services/TransactionsWithout220Service";
import Pagination from "@material-ui/lab/Pagination";
import { useTable } from "react-table";
import Spinner from "./Spinner";

import { createTheme, ThemeProvider } from "@mui/material/styles";
import rtlPlugin from "stylis-plugin-rtl";
import { prefixer } from "stylis";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";


const themeRtl = createTheme({
  direction: "rtl" // Both here and <body dir="rtl">
});
const themeLtr = createTheme({
  direction: "ltr" // Both here and <body dir="ltr">
});
// Create rtl cache
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin]
});



const TransactionsWithout220List = (props) => {

  const [transactions, setTransactions] = useState([]);
  const transactionsRef = useRef();
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(0);
  const [pageSize, setPageSize] = useState(3);
  const pageSizes = [20];

  const [loading, setLoading] = useState(false);

  transactionsRef.current = transactions;

  const [direction, setDirection] = useState("rtl");

  
  const getRequestParams = (page, pageSize) => {
    let params = {};
    if (page) {
      params["page"] = page ;
    }
    if (pageSize) {
      params["size"] = pageSize;
    }
    return params;
  };


  const retrieveTransactions = () => {
    setLoading(true);
    const params = getRequestParams(page, pageSize);
    TransactionsWithout220Service.getAll(params)
      .then((response) => {
        const { Data, TotalPages } = response.data;
        setTransactions(Data);
        setCount(TotalPages);
        setLoading(false);
        console.log(response.data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  useEffect(retrieveTransactions, [page, pageSize]);

  const handlePageChange = (event, value) => {
    setPage(value);
  };
  const handlePageSizeChange = (event) => {
    setPageSize(event.target.value);
    setPage(1);
  };


  const refreshList = () => {
    retrieveTransactions();
  };


  const columns = useMemo(
    () => [

      {
        Header: "آدرس",
        accessor: "Address",
      },
      {
        Header: "تلفن همراه",
        accessor: "CellPhoneNumber",
      },
      {
        Header: "نام",
        accessor: "FirstName",
      },
      {
        Header: "نام خانوادگی",
        accessor: "LastName",
      },
      
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data: transactions,
  });


  if (loading) {
    return (
      <Spinner message={`لصفا صبر کنید`} />
    );
  }

  document.body.dir = direction;

  return (
    <div className="list row mt-5 pt-5 mb-5 pb-5" align="right" >
      <div className="col-md-12 list">
        <div className="mt-3" dir="rtl">
          {"تعداد در هر صفحه: "}
          <select onChange={handlePageSizeChange} value={pageSize} >
            {pageSizes.map((size) => (
              <option key={size} value={size} >
                {size}
              </option>
            ))}
          </select>

          <CacheProvider value={cacheRtl}>
          <ThemeProvider theme={direction === "rtl" ? themeRtl : themeLtr}>
            <Pagination
                  className="my-3"
                  count={count}
                  page={page}
                  siblingCount={1}
                  boundaryCount={1}
                  variant="outlined"
                  shape="rounded"
                  color="primary"
                  onChange={handlePageChange}
                />
          </ThemeProvider>
          </CacheProvider>
          
        </div>
        <table
          className="table table-striped table-bordered"
          {...getTableProps()}
        >
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TransactionsWithout220List;

现在分页如下所示：

我希望箭头从右到左。

Answer 1

你可以通过一个技巧来解决这个问题！ 用新图标替换文档中的按钮：

import * as React from "react";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";
import { createTheme, PaginationItem, ThemeProvider } from "@mui/material";
import ArrowBackIos from "@mui/icons-material/ArrowBackIos";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
export default function PaginationRounded() {
  const themeRtl = createTheme({
    direction: "rtl" // Both here and <body dir="rtl">
  });
  return (
    <Stack spacing={2}>
      <ThemeProvider theme={themeRtl}>
        <Pagination
          style={{}}
          variant="outlined"
          shape="rounded"
          renderItem={(item) => (
            <PaginationItem
              components={{ previous: ArrowForwardIosIcon, next: ArrowBackIos }}
              {...item}
            />
          )}
          count={10}
        />
      </ThemeProvider>
    </Stack>
  );
}

这是分页形状：

React Material UI 分页在 RTL 中无法正常工作

问题描述

1 个解决方案

解决方案1
0 2022-07-23 07:51:55

React Material UI 分页在 RTL 中无法正常工作

问题描述

1 个解决方案

解决方案1 0 2022-07-23 07:51:55

解决方案1
0 2022-07-23 07:51:55