logo 有点东西

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

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

01、初始情况

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

主要文件内容：

  1. nuxt.config.ts：nuxt配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
                }
            }
        }
    }
  
    //...
})
  1. tailwind.config.ts：tailwind配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
  1. assets/css/tailwind.css：自动导入的tailwind样式文件
1
2
3
4
5
6
7
8
9
10
@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}
  1. assets/css/main.css：自定义布局&重置prime变量样式文件
1
2
3
4
5
:root {
  --p-toolbar-background: var(--bg-transparent);
}

/* 其他样式... */

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

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

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

1
2
3
4
5
: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，这次的修改项有两个：

  1. assets/css/tailwind.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 将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;
}


  1. nuxt.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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下，重置部分样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
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组件样式

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

Card组件的可用变量Card组件的可用变量

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// ...

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

// ...

配置完成后重启项目，一切搞定。后续可以把这部分自定义样式配置封装到单独文件中，再在nuxt.config.ts中引用。

nice，搞定！nice，搞定！

其他推荐内容

在nuxt3中同时使用PrimeVue和TailwindCSS
  • 2025/02/28
    • 编程

在nuxt3中同时使用PrimeVue和TailwindCSS

评论区