Я использую этот элемент управления для нумерации страниц Ссылка и могу получить следующие результаты.
Я могу изменить цвет фона невыбранных / активных элементов, но способ изменения стилей выбранных элементов, как показано на рисунке 8, имеет фиолетовый цвет, поэтому мне нужно, чтобы он был другого цвета.
Ниже приведен код JS в реакции
const styles = theme => ({
paginationItemStyle: {
marginLeft: "5px",
color: "white"
},
paginationLinkStyle: {
backgroundColor: "#b90000",
borderRadius: "5px",
"&:hover": {
backgroundColor: "#772e2e",
},
"&:active": {
backgroundColor: "#772e2e",
}
}
});
<Pagination>
<PaginationItem>
<PaginationLink previous />
</PaginationItem>
{someNumbersList.map((i, key) => (
<PaginationItem key={key} className={classes.paginationItemStyle} active={currentPage==(i+1)}>
<PaginationLink className={classes.paginationLinkStyle}>
{i+1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem>
<PaginationLink next />
</PaginationItem>
</Pagination>