React分页组件：如何实现点击按钮后保持高亮样式？

问题根源 #

你已经给当前页按钮添加了active类，但CSS中没有针对该类的样式定义；且:active伪类是元素被点击瞬间的状态，并非持久化的当前页样式，所以点击后样式无法保持。

修复步骤 #

1. 补充CSS的.active类样式 #

在你的Pagination.css文件中，添加针对.active类的样式，注意选择器优先级要高于基础按钮样式：

.pagination button.active {
    background-color: #ff52f1;
    color: white;
    border-color: #ff52f1;
    font-weight: 600;
    box-shadow: 0 0.5rem 1rem #ff52f136;
}

直接复用你:active伪类里的样式即可，这样当前页按钮就能保持你想要的高亮状态。

2. 优化React组件的className写法（可选） #

当前的className逻辑是正确的，但可以用模板字符串让代码更易读、扩展性更强：

className={`${page === currentPage ? "active" : ""}`}

3. 验证状态传递 #

确保父组件中currentPage状态维护正常：

• 父组件需正确初始化并更新状态，示例：

  const [currentPage, setCurrentPage] = useState(1);
  

• 传递给Pagination组件的currentPage和setCurrentPage props没有错误。

最终效果 #

点击分页按钮后，对应按钮会保持active类的样式，直到点击其他按钮切换currentPage状态，样式会自动切换到新的当前页按钮上。

内容的提问来源于stack exchange，提问作者Cezar P