I am trying to find a solution for overwriting the primevue component class p-accordion-header to have different styles depending on the status of the rendered component that I can get with the variantNumber.

This is what my code looks like:

  <Accordion :multiple="true">
    <AccordionTab
      v-for="variantNumber in variants?.keys()"
      :key="'V'   variantNumber"
    >
    </AccordionTab>
  </Accordion>

where variants is a simple list.

Imagine I have a function that returns the current class name called getCurrentVariantClass(variantNumber).

1. I can't add a class to the AccordionTab because it would be a non-props attribute.
2. I tried to wrap a div or a simple html tag around the AccordionTab and add a class there but the component won't render.

How am I supposed to overwrite the styles of p-accordion-header conditionally?

CodePudding user response：

To be able to customize AccordionTab to receive a variant prop, we could create a new component that uses the extends option, and add the prop there:

<!-- MyAccordionTab.vue -->
<script>
import { defineComponent } from 'vue'
import AccordionTab from 'primevue/accordiontab'

export default defineComponent({
  name: 'AccordionTab', // must be named "AccordionTab" for Accordion to detect it
  extends: AccordionTab,
  props: {
    variant: Number,