Svelte.js 3 Component Styling Tutorial

In this Svelte tutorial we learn about component styling and global stylesheets.

We cover local and global style scoping, the default scope type and how to add a custom global stylesheet to your app.

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.

Example: project
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.

Example: src/App.svelte
<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.

Example: src/components/Styling.svelte
<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.

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

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

Example: src/App.svelte
<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.

Example: src/components/Styling.svelte
<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.

Syntax: import css
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.

Example: project
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.

Example: src/css/main.css
body { background:black }

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

Example: src/main.js
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.