我想使用“下一个”和“上一个”文本,而不是下一个和上一个图标在材料用户界面分页。我没有找到任何相同的 prop 。你们能给予我一些变通办法。
ctehm74n1#
一个可能的解决方案是添加an:after和:before伪选择器。以下是使用SCSS的代码片段。确保将伪选择器添加到按钮,以防您希望它可单击。
.MuiPagination-root { .MuiPagination-ul { flex-wrap: nowrap; li { &:first-child { flex-basis: 100%; display: flex; justify-content: flex-start; align-items: center; > button::after { margin-left: 10px; content: 'previous'; } } &:last-child { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; > button::before { margin-right: 10px; content: 'next'; } } } } }
bcs8qyzn2#
可以使用after和before伪选择器。要向按钮添加样式,可以使用styled函数。Styled函数返回具有自定义样式的@mui组件。Click here to see docs.
import { styled } from "@mui/system"; import { Pagination } from "@mui/material"; const PaginationContainer = () => { const StyledPagination = styled(Pagination)({ "& .MuiPagination-ul li:last-child": { marginLeft: "16px", }, "& .MuiPagination-ul li:last-child button::before": { content: "'Next'", marginRight: "8px", }, "& .MuiPagination-ul li:first-child": { marginRight: "16px", }, "& .MuiPagination-ul li:first-child button::after": { content: "'Previous'", marginLeft: "8px", } }); return <StyledPagination count={10} /> };
2条答案
按热度按时间ctehm74n1#
一个可能的解决方案是添加an:after和:before伪选择器。以下是使用SCSS的代码片段。
确保将伪选择器添加到按钮,以防您希望它可单击。
bcs8qyzn2#
可以使用after和before伪选择器。要向按钮添加样式,可以使用styled函数。Styled函数返回具有自定义样式的@mui组件。Click here to see docs.