4 ms·

No one pointed out that the guy didnt know how to pass a style to child the current svelte framework allows you to. And simply ditched it. I assume the type of

No one pointed out that the guy didnt know how to pass a style to child the current svelte framework allows you to. And simply ditched it. I assume the type of project he was building means he is really good with web stuffs. But this is a simple thing to do. I am surprised. I am a fair beginner myself and having done it I never thought "this" would be an issue. The RFC is just an extra easier way to do it. If the OP is here, can I know where he faced the problem? Maybe the xommunity could have helped. I would never consider React over Svelte. Except the community size all I see are disadvantages.

jakelazaroff 6y ago
I saw the workaround, but I’d rather not go against the grain of the framework like that. I faced the problem when trying to add layout styles to a component from the outside — basically, the parent should decide a component’s position/dimensions/etc. FWIW, I don’t consider myself particularly good with web stuff. I’m just interested in graphics and I’ve beaten my head against it for long enough that I’ve figured out how to make some things :)
- arderary 6y ago
  It seems like your specific use case could be solved (as you mentioned) by passing down a `className` prop, exactly like React. It's described as a workaround in the RFC because the approach there relies on internal class names (and couples the internal component API to the parent), whereas you'd be passing in the specific class you'd be using. Something like this should work, without going too much against the grain of the framework: // Parent.svelte <script> import Child from "./Child.svelte" </script> <style> .container :global(.child) { color: red // your styles here } </style> <div class="container"> <Child className="child" /> </div> // Child.svelte <script> export let className </script> <h1 class={className}>I am styled by my parent</h1>

jakelazaroff 6y ago

I saw the workaround, but I’d rather not go against the grain of the framework like that. I faced the problem when trying to add layout styles to a component from the outside — basically, the parent should decide a component’s position/dimensions/etc. FWIW, I don’t consider myself particularly good with web stuff. I’m just interested in graphics and I’ve beaten my head against it for long enough that I’ve figured out how to make some things :)

arderary 6y ago
It seems like your specific use case could be solved (as you mentioned) by passing down a `className` prop, exactly like React. It's described as a workaround in the RFC because the approach there relies on internal class names (and couples the internal component API to the parent), whereas you'd be passing in the specific class you'd be using. Something like this should work, without going too much against the grain of the framework: // Parent.svelte <script> import Child from "./Child.svelte" </script> <style> .container :global(.child) { color: red // your styles here } </style> <div class="container"> <Child className="child" /> </div> // Child.svelte <script> export let className </script> <h1 class={className}>I am styled by my parent</h1>