DEV Community

Discussion on: Svelte quick tip: Style prop defaults

Collapse
 
geoffrich profile image
Geoff Rich

Yep - style props in Svelte are just syntactic sugar for setting CSS vars on a div. So <TextBox --line-color="mediumspringgreen"></TextBox> de-sugars into

<div style="display: contents; --line-color: "mediumspringgreen">
  <TextBox></TextBox>
</div>
Enter fullscreen mode Exit fullscreen mode

So the CSS vars will cascade to child elements like normal.

More details in the docs.

Collapse
 
paratron profile image
Christian Engel

Thanks for the clarification!

Do IDEs assist with that? For regular props its fairly easy since they are announced with export let foo; but how does it work for style props? Or do I need to assign them blindly?

Thread Thread
 
geoffrich profile image
Geoff Rich

For now, there's no way for component authors to specify which style props are available, aside from documentation. There's an open issue on the Svelte language tools (which makes IDE autocomplete work) to implement this feature.