Svelte.js 3 Component Styling Tutorial

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

Lesson Project

If you want to follow along with the examples in this lesson, you’ll need a Svelte app that was cloned with degit or scaffolded with Vite

If you already have an app from previous lessons, you can use that instead.

Scoped component styles in Svelte: Local & Global

By default, the CSS we define in a component is local scoped. That’s to say, the styles in a component can only affect that particular component, even if it has children.

For our example, we’ll use the root App component as the parent and create the following component as the child.

• /src/components/Styling.svelte

The project should look similar to the following.

project-folder/
├── src/
|   ├── components/
|   |   └── Styling.svelte
|   └── App.svelte

In the root App component we’ll add a heading with a style that colors the text blue. We’ll also import and use the Styling component.

<script>
  import Styling from './components/Styling.svelte'
</script>

<h2>Parent component</h2>
<hr>
<Styling />

<style>
  h2 { color: blue }
</style>

The styling component will also have a heading but will style the text color as red.

<h2>Child component</h2>

<style>
  h2 { color: red }
</style>

If we save the files and take a look in the browser, we’ll see the root App component’s text is blue and the Styling component’s text is red.

How to define a globally scoped style in Svelte

If we want to define a style globally, we need to use the :global() modifier in the style block.

<style>
  :global(selector) {
    /* styles */
  }
</style>

As an example, let’s define the heading style in our root App component as a global style.

<script>
  import Styling from './components/Styling.svelte'
</script>

<h2>Parent component</h2>
<hr>
<Styling />

<style>
  :global(h2) {
    color:limegreen
  }
</style>

But if we run the example in the browser, only the root App component’s text is colored green.

That’s because the local style in the child component will always take precedence over any global style.

If we want the global style to work on both components, we need to remove the local style from the Styling component.

<h2>Child component</h2>

<style>
  /* h2 { color: red } */
</style>

This time when we run the example, both headings will be green.

How to add a standalone stylesheet to a Svelte app

If we want to add our own custom stylesheet to Svelte, all we need to do is import it into the main.js file.

import '/path/to/stylesheet.css'

As an example, let’s create the following new folder and file.

• /src/css/main.css

The project should look similar to the following.

project-folder/
├── src/
|   ├── components/
|   |   └── Styling.svelte
|   ├── css/
|   |   └── main.css
|   └── App.svelte

To keep the example simple, we’ll just change the body background color to black.

body { background:black }

In the main.js file, we’ll import our new stylesheet at the top.

import App from './App.svelte'
import './css/main.css'

const app = new App({
	target: document.body
})

export default app

If we save the file and take a look in the browser, the page background will be black.