ProgressSpinner: Passthrough doesn't work

[samy-mssi]

Describe the bug

Hi, I use the unstyled version, but the ProgressSpinner component does not show. I tried to add a "pt" to use Tailwind for this component only but it still doesn't work. This is what I did :

<PrimeReactProvider
  value={{
    unstyled: true,
    pt: {
      progressspinner: Tailwind.progressspinner,
    },
  }}
>
  <App/>
</PrimeReactProvider>

Reproducer

https://stackblitz.com/edit/sa8ls3?file=src%2Fmain.jsx

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. set "unstyled: true" in PrimeReactProvider
2. add a passthrough in PrimeReactProvider
3. check the progressspinner render

Expected behavior

I expected the progressSpinner to show as Tailwind spinner

[melloware]

So here is the TW PR style

progressspinner: {
        root: {
            className: classNames('relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full')
        },
        spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
        circle: 'text-red-500 progress-spinner-circle'
    },

When I inspect your HTML its being applied:

<div class="relative mx-auto w-28 h-28 inline-block before:block before:pt-full" role="progressbar" aria-busy="true" data-pc-name="progressspinner" data-pc-section="root"><svg class="absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin" viewBox="25 25 50 50" data-pc-section="spinner" style="animation-duration: 2s;"><circle class="text-red-500 progress-spinner-circle" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" data-pc-section="circle"></circle></svg></div>

So I don't think the issue is its not applying the TailWind style it seems like something else is wrong with this that is needed.

[gcko]

Hey @samy-mssi , @melloware -> the issue is That you need to also apply the global css styles in the passthrough as well. You can see that implemented here: https://stackblitz.com/edit/sa8ls3-ep1x8n?file=src%2Fmain.jsx

Screenshot for reference

The necessary styles are also provided in the docs here

[melloware]

Thanks will close as By Design