Hacker News new | ask | show | jobs
by arderary 2024 days 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>