Styling child and nested components in CSS

[TheComputerM]

The problem is that I want to style components using CSS in the style tag, it prevents me from using the component to its fullest potential and making components easily customizable.

The solution could be:

Component.svelte

h1 {
  color: red;
}

<div style>
    <h1>Hello There</h1>
</div>

App.svelte

import Component from "./Component.svelte";

Component h1 {
    color: blue
}

<Component />

Current solution

Add a style prop to the component.

Component.svelte

export let style;

<div>
    <h1 {style}>Hello There</h1>
</div>

This problem is not too important, but definitely helps when working with UI libraries for making minor changes without changing much code.

[antony]

Hi @TheComputerM - this issue has been discussed almost endlessly since the dawn of Svelte, and each proposed solution is flawed in its own unique way. Please contribute your thoughts/discussion to the RFC so that we can find a way forward which works for everybody, in all scenarios :)

[AlbertMarashi]

Totally agree, feel free to contribute to the RFC and support or improve the various solutions the community has come up with to approach this.