Naive UI 的全局主题配置不生效是怎么回事？

UX-小敏提问于 2026-03-20 03:36:21 阅读 13

组件

我在项目里用 Naive UI，想改一下全局的主题色，比如把 primary 颜色换成 #00c2ff。按照文档在 main.js 里用了 createTheme 和 darkTheme 配置，但页面上按钮颜色还是默认的蓝色，完全没变。

我试过把配置写在 setup 里，也试过直接传给 ConfigProvider，都不行。是不是哪里写错了？下面是我现在的代码：

import { create, darkTheme } from 'naive-ui'

const naive = create({
  theme: darkTheme,
  globalThemeOverrides: {
    common: {
      primaryColor: '#00c2ff'
    }
  }
})

app.use(naive)

Naive UI 主题配置

我来解答赞 2 收藏

反馈

1 条解答

宇文树萱 Lv1

问题找到了，你写的是 globalThemeOverrides，但 create 方法里应该用 themeOverrides。

改成这样就行：

import { create, darkTheme } from 'naive-ui'



const naive = create({

  theme: darkTheme,

  themeOverrides: {

    common: {

      primaryColor: '#00c2ff'

    }

  }

})



app.use(naive)

就一个词写错了，Naive UI 会忽略掉不认识的 globalThemeOverrides，所以你写的颜色根本没生效。

另外提醒一下，如果用的是暗色主题 darkTheme，默认的 primary 颜色在暗色下本来就不太明显。你可以同时覆盖一下 hover 和 pressed 状态的颜色，让点击反馈更明显：

themeOverrides: {

  common: {

    primaryColor: '#00c2ff',

    primaryColorHover: '#33ccff',

    primaryColorPressed: '#0099cc'

  }

}

2026-03-20 04:01