Naive UI 的 Pagination 分页样式怎么自定义不生效? ___梓玥 提问于 2026-03-11 15:36:17 阅读 5 组件 我在用 Naive UI 的 Pagination 组件,想改一下分页按钮的背景色和圆角,但加了 CSS 好像没反应,是不是被组件内部样式覆盖了? 我试过在全局样式里写选择器,也试过加 !important,都不行。下面是我写的 CSS: .n-pagination-item { background-color: #f0f9eb !important; border-radius: 8px !important; } 我来解答 赞 2 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 程序猿建杰 Lv1 这个问题是因为 Naive UI 用了 CSS-in-JS 和 CSS 变量,普通的类选择器会被它的内部样式覆盖掉。 我的做法是用 Naive UI 提供的 CSS 变量来覆盖,这样最直接有效: .n-pagination { --n-item-border-radius: 8px; --n-item-color-hover: #f0f9eb; --n-item-color-active: #e1f3d8; } 把这段写在你全局的 CSS 或者组件的 style 里就行。 如果你还是想用传统的选择器方式,需要用 :deep() 穿透: :deep(.n-pagination-item) { background-color: #f0f9eb !important; border-radius: 8px !important; } 不过用 CSS 变量是官方推荐的方式,兼容性和可维护性都更好。你可以根据需要调整变量名,Naive UI 的每个组件都有对应的 CSS 变量文档。 回复 点赞 2026-03-11 16:03 加载更多 相关推荐 2 回答 26 浏览 Naive UI 分页组件样式不生效是怎么回事? 我在用 Naive UI 的 Pagination 组件时,想自定义分页按钮的间距,但加了 CSS 样式完全没反应。是不是被组件内部样式覆盖了? 我已经尝试在父容器上加了 class,也用了 !imp... 设计师亚美 组件 2026-02-25 21:01:18 2 回答 50 浏览 Naive UI的Pagination切换页码后数据没更新怎么办? 用Naive UI的Pagination组件做分页,切换页码时数据没变化,页面还是第一页的内容。 在Vue组件里绑定了page变量,通过@update:page="fetchData"监听事件,调接口... 令狐新霞 组件 2026-02-07 09:23:31 2 回答 23 浏览 Naive UI分页跳转后数据没变怎么处理? 用Naive UI的Pagination做分页时,切换页码后数据没变卡了好久了。我按文档写了onChange事件,也传了当前页码参数,但每次请求接口返回的数据还是第一页的内容。 代码大概是这样写的:&... Newb.永臣 组件 2026-02-10 14:27:29 1 回答 15 浏览 Naive UI 分页组件怎么绑定当前页码? 我在用 Naive UI 的 Pagination 组件,想通过 v-model 绑定当前页码,但页面一加载就报错说“Missing required prop: 'page'”,可我明明已经用 v-... Des.紫萱 组件 2026-02-24 22:05:18 1 回答 30 浏览 Naive UI的Pagination切换页码后怎么数据没更新? 我在用Naive UI的分页组件做数据分页,页面初始化时数据正常显示,但切换页码后数据还是第一页的内容,控制台没报错。我用了@update:page监听页码变化,代码是这样的: <n-pagin... 新艳 Dev 组件 2026-02-15 22:17:24 1 回答 33 浏览 Naive UI 的表格分页怎么和后端数据联动? 我用 Naive UI 的 NDataTable 做了个表格,现在想实现分页功能,但文档里只说了怎么配置分页组件,没讲怎么和后端接口配合。比如我点第二页,怎么自动请求第 2 页的数据? 我试过把 pa... A. 雨帆 框架 2026-02-26 17:31:20 1 回答 30 浏览 Naive UI 的 DataTable 表格列宽为啥不生效? 我在用 Naive UI 的 DataTable 组件,想通过 CSS 控制某一列的宽度,但加了样式完全没反应,是不是哪里写错了? 我试过在 table 的 class 里加自定义样式,也试过直接用 ... Air-涵菲 组件 2026-02-27 11:09:20 1 回答 14 浏览 Naive UI 的 Modal 关闭后怎么清空表单数据? 我在用 Naive UI 的 Modal 做一个用户信息编辑弹窗,打开时会把用户数据传进去填充表单。但关闭 Modal 后再打开另一个用户,表单里还是上次的数据,明显没清掉。我试过在 onClose ... 诸葛雨帆 组件 2026-03-09 08:16:23 1 回答 26 浏览 Naive UI 的表格怎么实现动态列显示? 我用 Naive UI 的 n-data-table 组件,想根据用户选择动态显示或隐藏某些列,但改了 columns 数组后表格没反应,是哪里不对? 试过用 computed 重新生成 column... Zz蒙蒙 框架 2026-03-04 21:04:20 1 回答 17 浏览 Naive UI 的 Popover 气泡怎么设置默认展开? 我在用 Naive UI 的 n-popover 组件,想让气泡在页面加载时就默认显示出来,而不是等用户 hover 或点击才出现。试了设置 show 属性为 true,但好像没生效,是不是还要配合其... 设计师诗语 组件 2026-03-04 20:58:20
我的做法是用 Naive UI 提供的 CSS 变量来覆盖,这样最直接有效:
把这段写在你全局的 CSS 或者组件的 style 里就行。
如果你还是想用传统的选择器方式,需要用
:deep()穿透:不过用 CSS 变量是官方推荐的方式,兼容性和可维护性都更好。你可以根据需要调整变量名,Naive UI 的每个组件都有对应的 CSS 变量文档。