在Naive UI和typescript中更改原色

Question

我是Naive的新手，我想覆盖我的应用程序的主题，使原色为橙色。我最初使用vuestic来更改它，所以我不确定我在更改它时做错了什么。这是我的main.ts文件，我最初在其中使用了vuestic覆盖(注释出来以显示它是如何实现的(。我把themeOverride放在哪里？TIA！

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");

Answer 1

您需要将themeOverrides作为道具发送到您的配置提供程序组件，如下所示：

<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>

干杯：(