Looking to customize a PrimeVue component (Calendar) by styling it differently and then re-exporting it.
Here's an example in React:
const WrappedCalendar: React.FC<CalendarProps> = (props)=>
<div style={{background:'green'}}>
<Calendar {...props}/>
</div>
Struggling with constant TypeScript errors while attempting this. Even tried extending from PrimeVue's Calendar, which also didn't work out.
Below is a simple attempt that isn't cooperating with TypeScript and exhibiting unexpected behavior:
<script setup lang="ts">
import Calendar, { CalendarProps, CalendarSlots } from 'primevue/calendar';
import { defineProps, h, } from 'vue'
const props = defineProps<CalendarProps>()
const slots = defineSlots<CalendarSlots>()
const CalendarFC = () => {
return h(Calendar, props, slots)
}
</script>
<template>
<div :style="{ background: 'green' }">
<CalendarFC></CalendarFC>
</div>
</template>
Is there a simpler way to wrap a component while maintaining the same props / emits / slots as the original one and keeping TypeScript in line?