英文:
DataGrid pagination not aligning to the right in container with dir="rtl"
问题
试图在具有 dir="rtl" 的容器中使用 Material-UI 创建带有分页的 DataGrid。我已自定义分页组件以对齐容器的右侧，但效果不如预期。
这里有一个 codeSandBox 示例。
我已经定义了 Box dir="rtl"。当我运行代码时，分页组件对齐到容器的左侧。
如何使分页组件出现在容器的右侧，同时仍然使用 dir="rtl"？
英文:
I'm trying to create a DataGrid with pagination using Material-UI in a container with dir="rtl". I've customized the pagination component to be aligned to the right side of the container, but it's not working as expected.
Here's a example In codeSandBox
I've defined Box dir="rtl". when I run the code, the pagination component is aligned to the left side of the container.
How can I make the pagination component appear on the right side of the container, while still using dir="rtl"?
答案1
得分: 2
你需要修改你的 CustomPagination 组件，将其对齐到右侧。
在你的 CodeSandbox 中，我只是在 <div> 中添加了 style={{ display: "flex", width: "100%" }}>，并在 <Pagination> 中添加了 sx={{ ml: "auto" }} 以使其生效。
function CustomPagination() {
const apiRef = useGridApiContext();
const page = useGridSelector(apiRef, gridPageSelector);
const pageCount = useGridSelector(apiRef, gridPageCountSelector);
return (
<div dir="ltr" style={{ display: "flex", width: "100%" }}>
<Pagination
color="primary"
count={pageCount}
page={page + 1}
onChange={(event, value) => apiRef.current.setPage(value - 1)}
sx={{ ml: "auto" }}
/>
</div>
);
}
英文:
You need to modify your CustomPagination component to align it to the right side.
In your codesandbox, I just added style={{ display: "flex", width: "100%" }}> in the <div> and sx={{ ml: "auto" }} in the <Pagination> to make it work.
function CustomPagination() {
const apiRef = useGridApiContext();
const page = useGridSelector(apiRef, gridPageSelector);
const pageCount = useGridSelector(apiRef, gridPageCountSelector);
return (
<div dir="ltr" style={{ display: "flex", width: "100%" }}>
<Pagination
color="primary"
count={pageCount}
page={page + 1}
onChange={(event, value) => apiRef.current.setPage(value - 1)}
sx={{ ml: "auto" }}
/>
</div>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论