CSS-in-JS patterns with Svelte - Mini Project: Build & Apply

CSS-in-JS Patterns with Svelte

📖 Scenario: You are building a simple Svelte component that shows a colored box with text. You want to style the box using CSS-in-JS patterns, meaning the styles are written inside the component file using JavaScript variables and applied dynamically.

🎯 Goal: Create a Svelte component that uses CSS-in-JS patterns to style a box with dynamic colors and padding. The styles should be defined as JavaScript variables and applied inline or via style bindings.

📋 What You'll Learn

Create a Svelte component with a div element representing a box

Define JavaScript variables for backgroundColor and padding

Apply these style variables to the div using Svelte's style binding

Add a text inside the box that says 'Styled Box'

💡 Why This Matters

🌍 Real World

CSS-in-JS patterns help keep styles close to components, making it easier to manage dynamic styling in modern web apps.

💼 Career

Understanding CSS-in-JS with Svelte is useful for frontend developers building interactive, component-based user interfaces.

1

Set up the box element

Create a Svelte component with a div element that contains the text Styled Box.

Svelte

  Styled Box

Hint

Start by writing a simple <div> with the text inside it.

2

Define style variables

Add two JavaScript variables inside a <script> tag: backgroundColor set to "lightblue" and padding set to "1rem".

Svelte

  // Define backgroundColor and padding variables here



  Styled Box

Hint

Use let to declare variables inside the <script> tag.

3

Apply styles using CSS-in-JS pattern

Use Svelte's style binding to apply the backgroundColor and padding variables as inline styles on the div. Use the syntax style="background-color: {backgroundColor}; padding: {padding};".

Svelte

  let backgroundColor = "lightblue";
  let padding = "1rem";



  Styled Box
  

Hint

Use curly braces {} inside the style attribute to insert JavaScript variables.

4

Make the styles reactive

Add a button below the div that changes backgroundColor to "lightcoral" when clicked. Use Svelte's on:click event binding with a function that sets backgroundColor = "lightcoral".

Svelte

  let backgroundColor = "lightblue";
  let padding = "1rem";

  // Add function to change backgroundColor



  Styled Box



  Change Color

Hint

Define a function inside <script> and bind it to the button's on:click event.