DEV Community

Discussion on: Svelte quick tip: Style prop defaults

View post
Collapse
 
paratron profile image
Christian Engel •

Will the css variables get available in children further down the render tree?

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.