Antd Pagination 初始渲染样式错乱是开发中常见的问题，表现为分页组件在页面首次加载时出现间距异常、按钮重叠或主题样式未生效等情况。这类问题大多与样式加载顺序、按需引入配置或运行环境有关，而非组件缺陷。
常见导致样式错乱的原因
- 未正确引入 antd 的全局样式文件，或引入顺序被业务 CSS 覆盖。
- 使用了 babel-plugin-import 等按需加载插件，但样式转换规则配置不完整。
- 在 SSR 或微前端环境中，样式注入时机晚于组件渲染。
- 使用了 css-in-js 方案但与 antd 的 less 变量体系冲突。
通过完整引入样式解决
如果是简单项目，最直接的方式是在入口文件顶部引入 antd 的 css：
// main.js
import 'antd/dist/reset.css'; // antd v5 推荐
import { Pagination } from 'antd';
function App() {
return <Pagination defaultCurrent={1} total={50} />;
}
export default App;
按需加载时的配置要点
当使用 Vite 时，可借助 vite-plugin-imp 或官方插件保证样式随组件自动引入：
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
plugins: [
react(),
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style/index.js`
}
]
})
]
});
SSR 场景下的处理
在服务端渲染中，应使用 extractStyle 或 StyleProvider 将样式提前注入 HTML，避免客户端首屏错位：
import { StyleProvider, extractStyle } from '@ant-design/cssinjs';
import { renderToString } from 'react-dom/server';
import App from './App';
const html = renderToString(
<StyleProvider>
<App />
</StyleProvider>
);
const style = extractStyle();
// 将 style 写入服务端返回的 head 中
检查 CSS 优先级冲突
若业务中存在全局重置样式，可能意外覆盖 antd 的类名。可用浏览器审查元素确认 .ant-pagination 相关规则是否被覆盖，必要时提升权重：
/* 避免这样写 */
.ant-pagination-item {
margin: 0;
}
/* 确认自身样式在 antd 之后引入 */
| 场景 | 推荐方案 |
|---|---|
| 纯客户端 SPA | 入口引入 reset.css 或配置按需插件 |
| Vite 项目 | 使用 vite-plugin-imp 自动引样式 |
| Next.js 等 SSR | StyleProvider + extractStyle |
小结
Antd Pagination 初始渲染样式错乱通常可通过规范样式引入、合理配置构建工具以及在特殊渲染模式下预处理 CSS 来解决。定位时建议先从浏览器元素面板观察类名覆盖情况，再对照上述方案调整。
AntdPagination样式错乱修改时间：2026-07-25 23:06:20