How to Target a Component in Svelte with CSS?

Targeting a component in Svelte means applying CSS styles specifically to a particular component to control its appearance and behavior. This can be achieved by using scoped styles within the component or applying global styles that affect the component. Proper targeting ensures that styles are encapsulated or shared as needed, enhancing your Svelte application's visual consistency and maintainability.

In this article, we will explore two different approaches to target a component in svelte with CSS.

Steps To Target a Component In Svelte with CSS

Step 1: Install Node.js

Make sure Node.js is installed on your machine. You can download it from nodejs.org.

Step 2: Install Svelte

Open your terminal and run the following command to set up a new Svelte project:

npx degit sveltejs/template svelte-app

Step 3: Navigate to Your Project Directory

Change to the newly created project directory:

cd svelte-app

Step 4: Install Dependencies

Install the required npm packages:

npm install

Project Structure:

Dependencies:

"devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
},
"dependencies": {
    "sirv-cli": "^2.0.0"
}

Scoped CSS Using Component Styles

In this approach, we are using scoped CSS within the <style> block of the Svelte component to target and style specific elements. The CSS defined here applies only to this component, ensuring that styles are encapsulated and do not affect other components. The active and inactive classes are conditionally applied based on the component's state, allowing dynamic styling.

Example: The below example uses Scoped CSS Using Component Styles to Target a Component In Svelte with CSS.

<!-- App.svelte -->
<script>
    let isActive = false;
</script>

<main>
    <h3>Scoped CSS Using Component Styles</h3>

    <button on:click={()=> isActive = !isActive}>
        Toggle Component Style
    </button>

    <div class={isActive ? 'active' : 'inactive' }>
        <p>This component has styles scoped to it.</p>
    </div>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
    }

    h3 {
        color: darkblue;
    }

    .active {
        background-color: lightblue;
        color: darkblue;
        border: 2px solid darkblue;
        padding: 1em;
        border-radius: 8px;
    }

    .inactive {
        background-color: lightcoral;
        color: darkred;
        border: 2px solid darkred;
        padding: 1em;
        border-radius: 8px;
    }
</style>

Output:

Global CSS with Component-Specific Classes

In this Approach, targeting a component in Svelte with CSS is done by defining global styles in an external CSS file, such as global.css. The component imports this global CSS file and uses predefined classes, such as component-style, active, and inactive, to apply styles. The component's state determines which class is applied dynamically, allowing the component to be styled based on its current state .

Example: The below example uses Global CSS with Component-Specific Classes to Target a Component In Svelte with CSS.

/* global.css */
.component-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  border-radius: 8px;
}

.component-style {
  width: 80%;
  max-width: 600px;
  border: 2px solid #333;
  padding: 1em;
  border-radius: 8px;
  transition: background-color 0.3s, color 0.3s;
}

.component-style.active {
  background-color: lightgreen;
  color: darkgreen;
}

.component-style.inactive {
  background-color: lightcoral;
  color: darkred;
}

.component-header {
  font-size: 1.5em;
  margin-bottom: 1em;
}

.component-content {
  font-size: 1.2em;
  margin-bottom: 1em;
}

.component-footer {
  margin-top: 1em;
}

h3 {
  color: darkblue;
  text-align: center;
}

button {
  display: block;
  margin: 1em auto;
  padding: 0.5em 1em;
  font-size: 1em;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: darkblue;
}

<!--App.svelte-->
<script>
    import './global.css';
    let isActive = false;
</script>

<main class="component-wrapper">
    <h3>Global CSS with Component-Specific Classes</h3>

    <button on:click={()=> isActive = !isActive}>
        Toggle Component Style
    </button>

    <div class="component-style {isActive ? 'active' : 'inactive'}">
        <p>This component uses global CSS for styling.</p>
    </div>
</main>

Output: