3 ms·

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 f

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>