开发环境
我用的是react-paginate库。我使用css对其进行样式设置。
当我在mac chrom上查看它时,样式未被破坏,但当我在windows chrom上查看它时,css样式被破坏。
ReactPaginate的类名为pagination,并使用css进行样式设置。
<div>
<ReactPaginate
previousLabel={'<'}
nextLabel={'>'}
breakClassName={'break-me'}
pageCount={3}
pageRangeDisplayed={3}
onPageChange={(data) => onCahngePage(data)}
containerClassName={'pagination'}
activeClassName={'active'}
/>
</div>
.pagination {
display: flex;
gap: 20px;
margin: 0 auto;
li {
position: relative;
width: 15px;
height: 15px;
border-radius: 50%;
white-space: nowrap;
overflow: auto;
a {
position: absolute;
left: 4px;
font-size: 15px;
background: white;
outline-style: none;
color: white;
}
animation: ripple 0.7s linear infinite;
&.active {
background: blue;
color: blue;
a {
color: blue;
background: blue;
overflow: auto;
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(184, 226, 250, 0.733), 0 0 0 0.1em rgba(184, 226, 250, 0.733),
0 0 0 0.2em rgba(184, 226, 250, 0.733), 0 0 0 0.3em rgba(184, 226, 250, 0.733);
}
100% {
box-shadow: 0 0 0 0.1em rgba(184, 226, 250, 0.733), 0 0 0 0.2em rgba(184, 226, 250, 0.733),
0 0 0 0.4em rgba(184, 226, 250, 0);
}
}
}
.previous {
display: none;
}
.next {
display: none;
}
}
null