Using v-bind Style PrimeVue Component

UI Components for Vue
Post Reply
condoshark
Posts: 2
Joined: 25 Oct 2022, 13:27

10 Nov 2022, 17:49

Hi I'm attempting to style a Dialog component header using v-bind in the parent component. I'm able to style the header if v-bind is not used and the style attribute is 'hard-coded'. Using v-bind I can see the vue css var is being added to the header but its value is undefined. Any ideas on how to get this working?

I'm using vue 3.2.33 and primevue 3.12.5

Code: Select all

<template>
  <Dialog v-model:visible="show">
    <h1>Hello</h1>
  </Dialog>
</template>
<script>
  const secondaryColor = ref("49, 97, 115, 1");

  const show = true;
</script>

<style>
  /* dialog header styling does not work */
  div.p-dialog div.p-dialog-header {
    background-color: rgba(v-bind("secondaryColor"), 1);
    color: #fff;
  }

  /* dialog header styling works */
  div.p-dialog div.p-dialog-header {
    background-color: rgba(49, 97, 115, 1);
    color: #fff;
  }
</style>

bahadirsofuoglu
Posts: 30
Joined: 06 Sep 2022, 08:59

07 Dec 2022, 09:34

Hi, You should use 'deep' for overriding component styles. You can find a sample in local styling section https://www.primefaces.org/primevue/theming

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests