Open theetrain opened 2 years ago
I actually just ran into this same problem last week! That --style-props
looks like it might be the way to go, if you want to open a PR I would probably accept that, otherwise I will see if I can add that in soon.
Hello, thanks for making this component. It works very well!
Issue
While implementing it in my SvelteKit app, I noticed that sometimes the ProgressBar would not appear visually, even though it correctly mounted and animated in the DOM (from my browser's element inspector).
After lots of digging, I found out that the
z-index
values I supplied were being overwritten by ProgressBar.svelte's styles!In my +layout.svelte, I applied z-index like this:
But if I navigate to my page from a page not using ProgressBar, the ProgressBar
z-index
value of1
would be added to the page below my styles, overwriting mine.Workaround
My workaround was to add
!important
:Proposal
I think ideally it would be great to have these styles be overridden by the component without having to write global CSS. I propose making use of
--style-props
. The Svelte user experience would be:And this would apply
8100
to.svelte-progress-bar
and increment to8101
and apply to.svelte-progress-bar-leader
internally. Style props can also be leveraged for the ProgressBar'scolor
.