React中Pagination样式不生效主因是CSS作用域限制，需用:global、::v-deep等穿透方案；Flex对齐失效因父容器未设display:flex；自定义页码须用itemRender函数；移动端需增大按钮触控区域；滚动耦合问题需防抖或IntersectionObserver处理。
React 中 Pagination 组件默认样式不生效？先查 CSS 作用域
多数人改不动样式，不是写错了 css，而是组件内部节点没被正确选中。比如 ant design 的 pagination 渲染后外层是 .ant-pagination，但如果你用 css-in-js 或 scoped style（如 vue sfc 的 <style scoped>），这些类名根本不会穿透进去。
实操建议：
- 用浏览器开发者工具定位真实 DOM 类名，别凭印象写
.pagination - React + CSS Modules？加
:global(.ant-pagination) { ... }或直接在全局 CSS 文件里覆盖 - Vue 项目？在
<style>块里用::v-deep(.ant-pagination) { ... }（Vue 2）或:deep(.ant-pagination) { ... }（Vue 3） - Next.js？确保自定义 CSS 被
pages/_app.tsx正确引入，否则 SSR 下样式不生效
justifyContent 和 alignItems 对齐失效？检查父容器 display
想把分页条居右或垂直居中，却死活对不齐——大概率父容器是 div 默认的 display: block，Flex 属性压根不生效。
实操建议：
- 给分页组件外层包一层
div，并显式设display: flex - 避免嵌套过深：Ant Design 的
Pagination自带display: inline-flex，如果父级是text-align: center，直接用它比 Flex 更轻量 - 需要响应式对齐？别只写
justify-content: flex-end，搭配@media (max-width: 768px)改成justify-content: center - 注意 Safari 旧版本对
flex-wrap: wrap和gap兼容性差，分页项多时建议用margin替代gap
自定义页码按钮文字或图标？别动 itemRender 就改不了
默认页码是数字，但产品要显示“上一页”“下一页”，或者用 SVG 图标代替箭头，必须用 itemRender —— 这是个函数 props，不是字符串配置项。
实操建议：
- Ant Design 示例写法：
itemRender={(page, type, originalElement) => type === 'page' ? <span>第{page}页</span> : originalElement} - type 可能值只有
'page'、'prev'、'next'、'jump-prev'、'jump-next'，别写'previous'这种错名 - 返回
originalElement是安全做法，它已带 class 和事件绑定；自己重写按钮得手动加onClick和disabled状态逻辑 - 如果用了 React.memo 包裹自定义渲染函数，记得把
page和type加进依赖数组，否则翻页不更新
移动端分页按钮太小、点不准？优先改 padding 和 min-width
PC 上看着正常，手机一摸就点串页——根本原因是按钮尺寸没适配触控最小区域（iOS/Android 推荐 ≥44×44px）。
实操建议：
- 不要只调
font-size，重点加padding: 8px 12px，再配合min-width: 32px防止数字页码压缩 - 禁用
user-select: none（某些 UI 库默认加了），否则长按可能触发复制干扰操作 - 箭头按钮容易被忽略？给
.ant-pagination-item-link加background: #f5f5f5和border-radius: 4px提升可识别性 - 真机测试时注意：微信内置浏览器对
transform: scale()的点击热区计算有偏差，慎用缩放做“视觉变大”
最麻烦的其实是分页组件和表格/列表的滚动耦合问题：用户快速滚动后点击页码，事件可能被容器 scroll 拦截。这种得在 onScroll 里加防抖，或者换用 IntersectionObserver 主动监听可视区域，而不是等点击才响应。
