Styling Custom Components in Svelte

<CustomComponent class="some-class" /><style>
.some-class{ background-color:red;}
</style>

Solutions

#1 Using a Wrapper Div on Parent

<div class="some-class">
<CustomComponent/>
</div>
<style>
.some-class{ background-color:red;}
</style>

#2 Declare classes inside custom component & pass class names as prop

/*Parent Component*/<CustomComponent className="some-class"/>/*Child Component*/<script> export let className; </script><div class={className}></div><style>
.some-class{ background-color:red;}
</style>

#3 CSS Variables Values via Component Props

/*Parent Component*/<CustomComponent --color="red"/>/*Child Component*/<div class="some-class">123</div><style>
.some-class{background-color: var(--color);}
</style>

#3 Global CSS

/*Parent Component*/<div class="body">
<CustomComponent/>
</div>
<style>
.body > :global(.some-class) {
background-color:red;
}
</style>
/*Child Component*/<div class="some-class">123</div>
/*Parent Component*/<div class="body">
<CustomComponent/>
</div>
<style lang="scss">
.body{
:global(.some-class) {
background-color:red;
}
}
</style>
/*Child Component*/<div class="some-class">123</div>

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store