primefaces / primevue-tailwind

PrimeVue Components Styled with Tailwind CSS
https://tailwind.primevue.org
MIT License
624 stars 75 forks source link

ptOptions overrides the defaults of its children #320

Closed sergeydus closed 1 month ago

sergeydus commented 2 months ago

ptOptions of parent components seem to override the default options of it's child component

expected: the ptOptions of a parent shouldn't affect the styling of the children

Primevue Version: 4.0.5

Firstly, i've overwritten the default ptOptions to be: app.use(PrimeVue, { unstyled: true, pt: Aura, ptOptions:{ mergeProps: false, } });

this is how the following code looks like without ptOptions, the Button behaves as expected: <Panel> <Button icon="pi pi-arrow-right" pt:root="bg-green-500" @click="visible = true" /> </Panel> image

now, if I override the ptOptions in panel, the Buttons style changes, despite the ptOptions being for the Panel component, rather than the Button Component:

`<Panel :ptOptions="{ mergeProps: true, mergeSections: true, }"

<Button icon="pi pi-arrow-right" pt:root="bg-green-500" @click="visible = true" /> `

which results in:
image

reproduction: https://stackblitz.com/edit/wf943d?file=src%2FApp.vue in the reproduction, simply remove/add the ptOptions in panel, and see how it affects the Button's styling

cagataycivici commented 1 month ago

As of v4.1.1, the new Tailwind styles have been rewritten using the preprocessor approach with @apply instead of pass-through. As a result this issue is not relevant any more.

New Website is live.