vue.js - PrimeVue Theme Styles - Stack Overflow

admin管理员组

文章数量:1391991

I am using PrimeVue with TailwindCSS and have defined a custom theme preset using definePreset from @primevue/themes. However, my custom background color for the primary button is not being applied unless I use !important.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primevue/themes'

const MyPreset = definePreset(Aura, {
    components: {
        button: {
           label: {
               font: {
                  weight: 'bold',
                }
            },
            primary: {
                background: '#b8e3ff', // Not applying unless I use !important
                color: 'red',
                hover: {
                    background: '#b8e3ff',
                }
            }
        }
    }
})

const app = createApp(App)
app.use(PrimeVue, {
    theme: {
        preset: MyPreset,
        options: {
            cssLayer: {
                name: 'primevue',
                order: 'tailwind-base, primevue, tailwind-utilities'
            }
        }
    }
}).mount('#app')

Important to note that the fontWeight for label is working properly without important.
The background: '#b8e3ff' on my primary button does not apply unless I add !important. Is there a way to fix this issue without relying on !important?

I am using PrimeVue with TailwindCSS and have defined a custom theme preset using definePreset from @primevue/themes. However, my custom background color for the primary button is not being applied unless I use !important.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import { definePreset } from '@primevue/themes'

const MyPreset = definePreset(Aura, {
    components: {
        button: {
           label: {
               font: {
                  weight: 'bold',
                }
            },
            primary: {
                background: '#b8e3ff', // Not applying unless I use !important
                color: 'red',
                hover: {
                    background: '#b8e3ff',
                }
            }
        }
    }
})

const app = createApp(App)
app.use(PrimeVue, {
    theme: {
        preset: MyPreset,
        options: {
            cssLayer: {
                name: 'primevue',
                order: 'tailwind-base, primevue, tailwind-utilities'
            }
        }
    }
}).mount('#app')

Important to note that the fontWeight for label is working properly without important.
The background: '#b8e3ff' on my primary button does not apply unless I add !important. Is there a way to fix this issue without relying on !important?

• vue.js
• primevue

Share Improve this question Follow asked Mar 14 at 12:40 AskingAsking 4,2402121 gold badges8282 silver badges163163 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The default Styled Mode classes are designed for the colorScheme, so they are more strict than without it. Therefore, to override styles without using !important, you need to define the override styles within the colorScheme for both light and dark modes.

• Theming Component in Styled Mode - PrimeVue v4 Docs

In a way, it's logical that if you want to override the original colors, they will almost always differ between light and dark modes. So, you will likely need to customize both modes.

const { createApp, ref } = Vue;

const app = createApp();

const MyPreset = PrimeVue.definePreset(PrimeVue.Themes.Aura, {
  components: {
    button: {
      primary: {
        // weaker rule than the default button.colorScheme.*.primary.background
        background: '#000',
      },
      colorScheme: {
        light: {
          label: {
            font: {
              weight: 'bold',
            },
          },
          primary: {
            // stronger rule then button.primary.background
            background: '#b8e3ff',
            color: 'red',
            hover: {
              background: '#b8e3ff',
            },
          },
        },
        dark: {
          /* ... */
        },
      },
    },
  },
})

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

appponent('p-button', PrimeVue.Button);

app.mount('#app');

<script src="https://unpkg/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg/primevue/umd/primevue.min.js"></script>
<script src="https://unpkg/@primevue/themes/umd/aura.min.js"></script>

<div id="app">
  <p-button
    label="test"
  />
</div>

Alternatively, you can use Unstyled Mode if you want full customization.

• Theming with Unstyled Mode - PrimeVue v4 Docs

本文标签： vuejsPrimeVue Theme StylesStack Overflow