Naive UI 的 Pagination 分页样式怎么自定义不生效?

___梓玥 阅读 5

我在用 Naive UI 的 Pagination 组件,想改一下分页按钮的背景色和圆角,但加了 CSS 好像没反应,是不是被组件内部样式覆盖了?

我试过在全局样式里写选择器,也试过加 !important,都不行。下面是我写的 CSS:

.n-pagination-item {
  background-color: #f0f9eb !important;
  border-radius: 8px !important;
}
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
程序猿建杰
这个问题是因为 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