Naive UI 分页组件样式不生效是怎么回事？ 设计师亚美 提问于 2026-02-25 21:01:18 阅读 18 组件 我在用 Naive UI 的 Pagination 组件时，想自定义分页按钮的间距，但加了 CSS 样式完全没反应。是不是被组件内部样式覆盖了？ 我已经尝试在父容器上加了 class，也用了 !important，但还是不行。控制台也没报错，就是样式没变化。 .custom-pagination .n-pagination-item { margin: 0 8px !important; } 我来解答 赞 2 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 A. 瑞玲 Lv1 你这个写法的问题在于 Naive UI 的 Pagination 组件是用 Shadow DOM 渲染的，外层的 .custom-pagination 选不中内部的 .n-pagination-item，哪怕加了 !important 也没用。 官方文档里说，要覆盖 Shadow DOM 内部样式，得用 ::deep（Vue 3）或者 :deep（SCSS 语法）穿透，或者直接用全局样式加更高优先级的属性选择器。 最稳妥的写法是这样： :deep(.n-pagination-item) { margin: 0 8px !important; } 或者如果你是用原生 CSS（非预处理器），就写： ::deep(.n-pagination-item) { margin: 0 8px !important; } 注意要放在组件的
.custom-pagination选不中内部的.n-pagination-item，哪怕加了!important也没用。官方文档里说，要覆盖 Shadow DOM 内部样式，得用
::deep（Vue 3）或者:deep（SCSS 语法）穿透，或者直接用全局样式加更高优先级的属性选择器。最稳妥的写法是这样：
或者如果你是用原生 CSS（非预处理器），就写：
注意要放在组件的