[记录]PrimeVue Theme的自定义方式

2025/03/13
- 编程
0阅读

书接上篇（《在nuxt3中同时使用PrimeVue和TailwindCSS》），在用Tailwind完成页面布局后，我开始着手用Prime开发操作页面。但问题又接踵而至。不过每天花点时间琢磨琢磨，终于搞明白了，在这记录一下。

01、初始情况

遇到的问题：无法重置prime组件样式的变量值(–p-*)。

主要文件内容：

nuxt.config.ts：nuxt配置文件

import Aura from '@primeuix/themes/aura';

export default defineNuxtConfig({
    css: [
        '~/assets/css/tailwind.css',
        '~/assets/css/main.css',
    ],
    modules: [
        '@nuxtjs/tailwindcss',
        '@primevue/nuxt-module',
    ],
    primevue: {
        autoImport: true,
        options: {
            ripple: true,
            theme: {
                preset: Aura,
                options: {
                    darkModeSelector: '.p-dark',
                    cssLayer: false
                }
            }
        }
    }
  
    //...
})

tailwind.config.ts：tailwind配置文件

import type { Config } from 'tailwindcss'

// 引用PrimeUI
import PrimeUI from "tailwindcss-primeui";

export default {
  content: [],
  theme: {
    extend: {},
  },

  // 添加plugins、darkMode配置项
  plugins: [PrimeUI],
  darkMode: ["class", ".p-dark"]
  
} satisfies Config

assets/css/tailwind.css：自动导入的tailwind样式文件

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

assets/css/main.css：自定义布局&重置prime变量样式文件

:root {
  --p-toolbar-background: var(--bg-transparent);
}

/* 其他样式... */

这里为了精简篇幅和方便理解，以设置toolbar的背景色为透明举例。这个时候toolbar的设置是不生效的。

02、第一种方案：强制声明

修改assets/css/main.css文件，在样式后方追加 !important，强制修改样式。

:root {
  --p-toolbar-background: var(--bg-transparent) !important;
}

/* 其他样式... */

这种方式并不好，一旦后续其他地方要修改，只能使用内联样式、JS修改CSS变量值的方式再去覆盖。如果是多人协作开发，长久以往就会变成屎山项目，谁也搞不清样式设置会在何时生效….（**所以该方案，Pass！**）

03、第二种方案：CSS Layer

@layer是 CSS 中的一个新特性，用于创建级联层（Cascade Layers）。这将允许开发者将样式规则分组到不同的层中，在浏览器解析样式时会按照特定的顺序和优先级执行。

在assets/css/tailwind.css文件中我们已经见到了@layer的应用，而Prime在nuxt中也可以通过cssLayer配置来开启或关闭这一特性。

ok，这次的修改项有两个：

assets/css/tailwind.css

/* 将main.css作为一个reset层级引用进来 */
@import url("./main.css") layer(reset);

/* 将其放在primevue层后面 */
@layer tailwind-base, primevue, reset, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

nuxt.config.ts

import Aura from '@primeuix/themes/aura';

export default defineNuxtConfig({
    css: [
        '~/assets/css/tailwind.css',
        // 移除main.css的引用，因为在tailwind.css中我们已经引用了
        // '~/assets/css/main.css', 
    ],
    modules: [
        '@nuxtjs/tailwindcss',
        '@primevue/nuxt-module',
    ],
    primevue: {
        autoImport: true,
        options: {
            ripple: true,
            theme: {
                preset: Aura,
                options: {
                    darkModeSelector: '.p-dark',
                    // 启动cssLayer特性
                    cssLayer: true
                }
            }
        }
    }
  
    //...
})

这个方案相比第一种方案优雅许多，而且最初用的时候也没发现什么问题。但是，不出意外的话，应该要出意外了…

直到我正式开始编写操作页面，使用了prime的DataTable组件才发现问题。它组件样式不见了….

组件边框、背景色样式全不见了

再回去翻官方手册，发现官网的配置方式与我不同，参照其调整后也未能解决问题。

官方文档的配置方式

找了好久也没办法解决，该方案只能放弃了。

04、第三种方案：自定义Theme

就在我没有头绪，胡乱的往下翻时，我看到了Customization这一节内容。通过definePreset方法，可以基于某套官方默认Theme下，重置部分样式。

import PrimeVue from 'primevue/config';
import { definePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';

const MyPreset = definePreset(Aura, {
    //Your customizations, see the following sections for examples
});

app.use(PrimeVue, {
    theme: {
        preset: MyPreset
    }
 });

再往下拉，在Component这一小节，提供了如何自定义组件样式的方法。

自定义card组件样式

那么再看看card组件有哪些可配置的样式变量，可以看到上图的background和subtitle.color都能在Card的样式设置中找到。

Card组件的可用变量

那么依样画葫芦，我toolbar的配置应该是这样的：

// ...

const MyPreset = definePreset(Aura, {
    components: {
        toolbar: { // 组件名称
            colorScheme: {
                light: { // 亮色模式配置
                    root: {
                        // 一级属性配在root下
                        background: 'transparent'
                    },
                    // 多级属性配在light/dark下
                    border: {
                        color: '#ff0000'
                    }
                },
                darK: { // 暗色模式配置
                    
                }
            }
        }
    }
});

// ...