Styling subcomponents based on import

[dxlbnl]

Describe the problem

I'd like to be able to override some styles (margins, paddings, colors) for a component I import in a higher order component.

Describe the proposed solution

Styled components allow for higher level components to override styles (as long as they all are styled components). I think we could add something similar to svelte, since we know what generated classname a component has on compiletime, so we'd be able to replace the selector with the proper classname.

<style>
import Link from './Link.svelte'
</style>

<Link ... />

<style>
  {Link}:hover {
    fill: rebeccapurple;
  </style>

Alternatives considered

Passing custom property solutions are available, but that would require the imported component to expose all the possible values.

Importance

would make my life easier

[baseballyama]

This discussion has been conducted here in the past. And we decided not to implement it.

https://github.com/sveltejs/rfcs/pull/22

This is personal opinion but for such a use case, I prefer that implement a child component with a variant prop as a style pattern, and style of the child component changes according to the passed variant. Them child components can keep responsibility to render with correct styling.

[zigphrid]

This discussion has been conducted here in the past. And we decided not to implement it.

sveltejs/rfcs#22

This is personal opinion but for such a use case, I prefer that implement a child component with a variant prop as a style pattern, and style of the child component changes according to the passed variant. Them child components can keep responsibility to render with correct styling.

Your case implementation is structurally incorrect. The simplest example is the button component. Stylistic and functional variations (for example, the search button, the close button, the burger menu button, etc.) are wrong to describe in the original component of the button, it is more logical to describe them in separate wrapping components.

Best regards.