Naive UI 的 Pagination 分页样式怎么自定义不生效? ___梓玥 提问于 2026-03-11 15:36:17 阅读 59 组件 我在用 Naive UI 的 Pagination 组件,想改一下分页按钮的背景色和圆角,但加了 CSS 好像没反应,是不是被组件内部样式覆盖了? 我试过在全局样式里写选择器,也试过加 !important,都不行。下面是我写的 CSS: .n-pagination-item { background-color: #f0f9eb !important; border-radius: 8px !important; } 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 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 回答 47 浏览 Naive UI 分页组件样式不生效是怎么回事? 我在用 Naive UI 的 Pagination 组件时,想自定义分页按钮的间距,但加了 CSS 样式完全没反应。是不是被组件内部样式覆盖了? 我已经尝试在父容器上加了 class,也用了 !imp... 设计师亚美 组件 2026-02-25 21:01:18 2 回答 69 浏览 Naive UI的Pagination切换页码后数据没更新怎么办? 用Naive UI的Pagination组件做分页,切换页码时数据没变化,页面还是第一页的内容。 在Vue组件里绑定了page变量,通过@update:page="fetchData"监听事件,调接口... 令狐新霞 组件 2026-02-07 09:23:31 2 回答 49 浏览 Naive UI分页跳转后数据没变怎么处理? 用Naive UI的Pagination做分页时,切换页码后数据没变卡了好久了。我按文档写了onChange事件,也传了当前页码参数,但每次请求接口返回的数据还是第一页的内容。 代码大概是这样写的:&... Newb.永臣 组件 2026-02-10 14:27:29 1 回答 41 浏览 Naive UI 分页组件怎么绑定当前页码? 我在用 Naive UI 的 Pagination 组件,想通过 v-model 绑定当前页码,但页面一加载就报错说“Missing required prop: 'page'”,可我明明已经用 v-... Des.紫萱 组件 2026-02-24 22:05:18 1 回答 72 浏览 Naive UI的Pagination切换页码后怎么数据没更新? 我在用Naive UI的分页组件做数据分页,页面初始化时数据正常显示,但切换页码后数据还是第一页的内容,控制台没报错。我用了@update:page监听页码变化,代码是这样的: <n-pagin... 新艳 Dev 组件 2026-02-15 22:17:24 1 回答 53 浏览 Naive UI 的表格分页怎么不生效? 我在用 Naive UI 的 NDataTable 组件,数据明明有几十条,但分页控件完全没反应,点下一页还是显示全部数据。我是不是哪里配错了? 我已经设置了 pagination 属性,也绑定了 p... 百里梓豪 框架 2026-03-14 18:05:23 1 回答 74 浏览 Naive UI 的表格分页怎么和后端数据联动? 我用 Naive UI 的 NDataTable 做了个表格,现在想实现分页功能,但文档里只说了怎么配置分页组件,没讲怎么和后端接口配合。比如我点第二页,怎么自动请求第 2 页的数据? 我试过把 pa... A. 雨帆 框架 2026-02-26 17:31:20 2 回答 57 浏览 Naive UI 的全局主题配置不生效是怎么回事? 我在项目里用 Naive UI,想改一下全局的主题色,比如把 primary 颜色换成 #00c2ff。按照文档在 main.js 里用了 createTheme 和 darkTheme 配置,但页面... UX-小敏 组件 2026-03-20 03:36:21 1 回答 61 浏览 Naive UI 的 DataTable 表格列宽为啥不生效? 我在用 Naive UI 的 DataTable 组件,想通过 CSS 控制某一列的宽度,但加了样式完全没反应,是不是哪里写错了? 我试过在 table 的 class 里加自定义样式,也试过直接用 ... Air-涵菲 组件 2026-02-27 11:09:20 2 回答 90 浏览 Naive UI 的 TimePicker 时间范围限制不生效? 我在用 Naive UI 的 TimePicker 组件,想限制用户只能选 09:00 到 18:00 之间的时间,但设置 :disabled-hours 和 :disabled-minutes 好像... 冰杰~ 组件 2026-03-19 11:50:24
我的做法是用 Naive UI 提供的 CSS 变量来覆盖,这样最直接有效:
把这段写在你全局的 CSS 或者组件的 style 里就行。
如果你还是想用传统的选择器方式,需要用
:deep()穿透:不过用 CSS 变量是官方推荐的方式,兼容性和可维护性都更好。你可以根据需要调整变量名,Naive UI 的每个组件都有对应的 CSS 变量文档。