我有這個組件，我希望分頁組件居中。我嘗試在父 div 中使用 justifyContent （我知道它也應該是一個樣式組件，但我這樣做只是為了嘗試），但它不起作用（參見圖片以供參考）
import React, { useEffect } from 'react'
import styled from 'styled-components'
import { Product } from './Product';
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import Pagination from "@mui/material/Pagination";
const Container = styled.div`
padding:20px;
display: flex;
width:100%;
flex-wrap: wrap;
box-sizing:border-box;
justify-content: space-between;
`;
function paginator(items, current_page, per_page_items) {
let page = current_page || 1,
per_page = per_page_items || 12,
offset = (page - 1) * per_page,
paginatedItems = items.slice(offset).slice(0, per_page_items),
total_pages = Math.ceil(items.length / per_page);
return {
page: page,
per_page: per_page,
pre_page: page - 1 ? page - 1 : null,
next_page: total_pages > page ? page 1 : null,
total: items.length,
total_pages: total_pages,
data: paginatedItems
};
}
export const Products = ({items}) => {
const count = Math.ceil(items.length / 12);
const [page, setPage] = React.useState(1);
const handleChange = (event, value) => {
setPage(paginator(items, value, 12).page);
window.scrollTo(0, 500);
};
return (
<div style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
<Container>
{paginator(items, page, 12).data.map((item, index) => {
return (
<Product item={item} key={item.uniqueName}/>
);
})}
<Pagination
count={count}
page={page}
onChange={handleChange}
sx={{ '& .Mui-selected': {
backgroundColor: '#f0e3c1',
color:'white',
opacity:0.8
}, "& .MuiPaginationItem-root": {
color: "black",
fontFamily:'Montserrat',
}}}
/>
</Container>
</div>
)
}
我希望分頁位于中心，而不是與左側對齊。
uj5u.com熱心網友回復：
你能試試這個嗎 <Stack spacing={2} alignItems="center"> ...pagination code.. </Stack>
<Stack spacing={2} alignItems="center">
<Pagination
count={count}
page={page}
onChange={handleChange}
sx={{
'& .Mui-selected': {
backgroundColor: '#f0e3c1',
color: 'white',
opacity: 0.8
}, "& .MuiPaginationItem-root": {
color: "black",
fontFamily: 'Montserrat',
}
}}
/>
</Stack>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466511.html
上一篇：獲取一個月的所有天數
下一篇：反應原生：文本組件內的三元條件