应用 Primevue 主题

Posted 2023-02-22

【中文标题】应用 Primevue 主题

【英文标题】：Applying Primevue theme

【发布时间】：2021-03-07 01:33:39

【问题描述】：

编辑：由于我无法弄清楚这一点，我放弃了 Vue3 并返回到 Vue2 并切换到 Vuetify。

我对 Vue 完全陌生，并决定将 Vue 3 用于项目，这应该会导致我的硕士论文。由于更新到在 Vue 3 上运行的 UI 库并不多，我决定使用 Primevue。

目前我正在尝试将 Primevue 的主题之一应用到我的项目中，但结果并不是很令人满意。我使用的是深色主题，但背景全是白色，而组件使用主题作为背景和一般样式。

我希望有人能够帮助正确应用样式。

作为一个额外的问题，我想知道是否最好降级到 Vue 2 并使用更完善的 UI 库，例如 Vuetify 或 BootstrapVue。

main.js

import  createApp  from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import TieredMenu from 'primevue/tieredmenu';
import InputSwitch from 'primevue/inputswitch';

// import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';
import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';

const app = createApp(App);

app.use(store)
    .use(router)
    .use(VueApexCharts)
    .use(VueEllipseProgress)
    .component('TieredMenu', TieredMenu)
    .component('InputSwitch', InputSwitch)
    .mount('#app')

App.vue

<template>
  <div id="namegoeshere" >
    <router-view/>
    <div id="nav">
      <!--<router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>-->
    </div>
  </div>
</template>

<style >
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;


#nav 
  padding: 30px;


#nav a 
  font-weight: bold;
  color: #2c3e50;


#nav a.router-link-exact-active 
  color: #42b983;

</style>

【参考方案1】：

我遇到了类似的问题，使用 devtools 查看 prime-vue 文档站点显示在正文中设置了以下代码：

  body 
      margin: 0;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: var(--surface-a);
      font-family: var(--font-family);
      font-weight: 400;
      color: var(--text-color);
   

这里使用的变量来自加载的主题。这为我解决了这个问题。

我在文档中找不到任何关于必须设置此项的直接信息。