改变NaiveUI中组件的颜色

记录使用技术栈：vite+vue3+ts UI组件：naiveUI开发过程中遇到的问题

通过themeOverrides来设置组件，具体的属性值，需要下载NaiveUI的源码，从/src/组件名/styles/light.ts文件（例如：/src/Tabs/styles/light.ts）中self变量的返回值里面去查找

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <app />
  </n-config-provider>
</template>
<script lang="ts">
import { NConfigProvider } from 'naive-ui'
export default defineComponent({
  components: {
    NConfigProvider
  },
  setup(){
    const themeOverrides = {
      common: {
         primaryColor: "#ff9292" //方法一：总体设置
      },
      Tabs: {
        tabTextColorActiveBar: 'red',//方法二：单独设置
        barColor: 'yellow'
      }
    }
    return {
      themeOverrides
    }
  }
})
</script >

有的时候属性太多不太好找，可以通过F12去查找，例如要修改tag默认的背景色（设置了checkable后color属性失效），原背景色为下图白色：

F12审查tag元素

可以看到背景色就是白色，如何把白色变为灰色呢？修改--color-checkable的值就可以了

setup(){
    const themeOverrides = {
      common: {
        primaryColor: "#ff9292",
        primaryColorHover: "#ff9292"
      },
      Tag: {
        colorCheckable: '#f4f4f4',//--color-checkable变为驼峰的形式
        // colorHoverCheckable: '#ff9292',
        // textColorHoverCheckable: "#ffffff"
      }
}

背景色发生了改变。其他的修改同理**。**