在 Naive-UI 和 TypeScript 中更改主色

我刚开始使用 Naive，我想覆盖我的应用主题，使主色为橙色。我最初使用的是 vuestic 来修改，所以我不确定我在更改时哪里出了问题。这是我的 main.ts 文件，我以前在这里做过 vuestic 的覆盖（已注释以显示实现方式）。我应该把 themeOverride 放在哪里？提前感谢！

import { createApp } from "vue";
import App from "./app/App.vue";
import router from "./router";
import { store, key } from "./store";
import { use } from "echarts/core";
import ECharts from "vue-echarts";

// import ECharts modules manually to reduce bundle size
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart, GaugeChart } from "echarts/charts";
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  MarkLineComponent,
  ToolboxComponent,
  BrushComponent,
} from "echarts/components";
import "vuestic-ui/dist/vuestic-ui.css";
import naive from "naive-ui";
import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  GaugeChart,
  BrushComponent,
  MarkLineComponent,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  ToolboxComponent,
]);

const themeOverride: GlobalThemeOverrides = {
  common: {
    primaryColor: "ff6700"
  }
}

createApp(App)
  .use(store, key)
  .use(router)
  // .use(VuesticPlugin, {
  //   colors: {
  //     primary: "#ff6700",
  //   },
  // })
  .use(naive)
  .component("v-chart", ECharts)
  .mount("#AppMount");

答案＃1

你需要将 themeOverrides 作为 prop 传递给你的配置提供者组件，就像这样：

<script lang="ts">
  import { NConfigProvider, GlobalThemeOverrides } from 'naive-ui'

  const themeOverrides: GlobalThemeOverrides = {
    common: {
      primaryColor: '#FF8C00'
    }
  }
</script>

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <my-app />
  </n-config-provider>
</template>

干杯 :)