How should i use Carousel pcPrevButton and pcNextButton Pass Through to manipulate the styling?

[TaduJR]

<Carousel
	v-if="product && product.image_urls"
	class="mt-2"
	:value="product.image_urls"
	:numVisible="3"
	:numScroll="3"
	:responsiveOptions="carouselResponsiveOptions"
	:showIndicators="false"
        :pt={
            pcPrevButton: 'bottom-0',
            pcNextButton: 'botton-0'
        }"
>
	<template #item="slotProps">
		<div class="mb-4">
			<div class="relative mx-auto">
				<img :src="slotProps.data" class="w-full rounded" />
			</div>
		</div>
	</template>
</Carousel>

I event tried wrapping it in class object but it is not working.
After that I also tried modifying the root pt but it is working on root. But I can't manipulate the pcPrevButton and pcNextButton.
Is it an issue or am i using it incorrectly?

[j0rgedev]

Hello @TaduJR. Your PT doesn't works because both pcprev and pcnext are button components, so you'll have to pass the correct button PT object to make it work, otherwise it won't. Here is the fixed component:

    <Carousel
      v-if="product && product.image_urls"
      class="mt-2"
      :value="product.image_urls"
      :numVisible="3"
      :numScroll="3"
      :responsiveOptions="carouselResponsiveOptions"
      :showIndicators="false"
      :pt="{
        pcPrevButton: {
          root: {
            class: 'bottom-0',
          },
        },
        pcNextButton: {
          root: {
            class: 'bottom-0',
          },
        },
      }"
    >
      ...
    </Carousel>

By the way, I just checked the documentation, and noticed that both props are typed as any instead of the button PT type. I’m planning to open a PR to address this! 😁

[TaduJR]

Thank you so much @j0rgedev.