react-paginate设置className后container类样式不生效问题

安全阿岳

2026-8-29

问题根因

样式失效由两处写法错误导致：

手动给StyledReactPaginate传入className="container"，会直接覆盖styled-components自动生成的、用于绑定样式的唯一哈希类名，导致分页根节点丢失与styled样式的关联。react-paginate对CSS-in-JS类库的适配逻辑是接收props.className作为根容器类名，styled-components包裹组件时会自动传入生成的哈希类名，无需手动赋值。
样式模板中编写的.container属于后代选择器，仅会匹配根容器内部携带container类的子元素，而手动传入的container类实际挂载在根容器自身，选择器无法命中目标节点。

修复方案

移除手动传入的className="container"属性，交由styled-components自动完成根容器类名的传递与绑定
根容器自身的布局样式直接写在styled模板字符串的顶层即可，不需要嵌套.container选择器；分页内部元素的样式（如激活态、链接交互样式）保留原有后代选择器写法即可。

修复后完整代码

import ReactPaginate from "react-paginate";
import styled from "styled-components";

const StyledReactPaginate = styled(ReactPaginate)`
  /* 顶层样式直接作用于分页根容器，无需嵌套.container选择器 */
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;

  a {
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
  }

  .active {
    background: lime;
    a {
      border-color: lime;
    }
  }
`;

const Pagination = (props) => {
  return (
    <StyledReactPaginate
      previousLabel={props.previousLabel}
      nextLabel={props.nextLabel}
      pageCount={props.pageCount}
      onPageChange={props.onPageChange}
      activeClassName={"active"}
    />
  );
};

export default Pagination;