CSS-in-JS patterns with Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered style output of this Svelte component using CSS-in-JS?

Consider this Svelte component that uses a <style> tag with a dynamic CSS variable:

<script>
  export let color = 'blue';
</script>

<style>
  div {
    color: var(--text-color);
  }
</style>

<div style="--text-color: {color};">Hello</div>

What color will the text inside the <div> be when rendered?

Svelte

<script>
  export let color = 'blue';
</script>

<style>
  div {
    color: var(--text-color);
  }
</style>

<div style="--text-color: {color};">Hello</div>

A The text color will be transparent.

B The text color will be black (default).

C The text color will be red.

D The text color will be blue.

💡 Hint

Look at how the CSS variable --text-color is set inline on the div.

The inline style sets the CSS variable --text-color to the value of the color prop, which defaults to 'blue'. The CSS uses this variable for the text color, so the text appears blue.

📝 Syntax

intermediate

Which option correctly applies scoped dynamic styles in Svelte using CSS-in-JS?

You want to apply a dynamic background color to a <button> using CSS-in-JS in Svelte. Which code snippet correctly does this?

A <button style="background-color: {bgColor};">Click me</button>

B <button style="background-color: bgColor;">Click me</button>

C <button style="background-color: ${bgColor};">Click me</button>

D <button style="background-color: var(bgColor);">Click me</button>

💡 Hint

Remember how to insert JavaScript variables inside Svelte attribute bindings.

In Svelte, to use a JavaScript variable inside an attribute, you wrap it in curly braces. So {bgColor} correctly inserts the variable's value. The other options either treat it as a string or use invalid syntax.

🔧 Debug

advanced

Why does this CSS-in-JS style not apply in Svelte?

Given this Svelte component:

<script>
  let color = 'green';
</script>

<style>
  .text {
    color: color;
  }
</style>

<p class="text">Hello</p>

Why is the text color not green?

Svelte

<script>
  let color = 'green';
</script>

<style>
  .text {
    color: color;
  }
</style>

<p class="text">Hello</p>

A The <style> tag must be inside the <script> tag for variables to work.

B The class name 'text' is invalid in Svelte styles.

C CSS cannot use JavaScript variables directly; 'color' is treated as a literal string, not the variable.

D The color variable must be declared as export for CSS to access it.

💡 Hint

Think about how CSS and JavaScript variables interact in Svelte.

CSS inside <style> tags cannot access JavaScript variables directly. The word 'color' in CSS is treated as a literal color name, which is invalid here. To use dynamic colors, you must use inline styles or CSS variables.

❓ state_output

advanced

What is the background color after clicking the button twice in this Svelte CSS-in-JS example?

Consider this Svelte component:

<script>
  import { writable } from 'svelte/store';
  const bg = writable('white');

  function toggle() {
    bg.update(c => c === 'white' ? 'black' : 'white');
  }
</script>

<button on:click={toggle} style="background-color: {$bg};">Toggle</button>

What is the background color of the button after clicking it twice?

Svelte

<script>
  import { writable } from 'svelte/store';
  const bg = writable('white');

  function toggle() {
    bg.update(c => c === 'white' ? 'black' : 'white');
  }
</script>

<button on:click={toggle} style="background-color: {$bg};">Toggle</button>

A black

B white

C gray

D transparent

💡 Hint

Each click toggles the color between white and black.

Starting color is white. First click changes it to black. Second click changes it back to white.

🧠 Conceptual

expert

Which statement best describes CSS-in-JS pattern limitations in Svelte compared to React?

Choose the statement that correctly explains a limitation or difference of CSS-in-JS in Svelte compared to React frameworks.

A Svelte does not support scoped CSS-in-JS libraries like styled-components because styles are compiled separately, requiring inline styles or CSS variables for dynamic styling.

B Svelte fully supports all React CSS-in-JS libraries without any changes because both use virtual DOM.

C Svelte requires all CSS-in-JS to be written inside the <script> tag as JavaScript objects.

D Svelte automatically converts all CSS-in-JS styles into global styles, so scoping is impossible.

💡 Hint

Think about how Svelte compiles components and handles styles differently from React.

Svelte compiles components to efficient JavaScript and CSS. It does not use a virtual DOM or runtime style injection like React. Therefore, popular React CSS-in-JS libraries like styled-components do not work out of the box. Instead, Svelte encourages scoped styles in <style> tags and dynamic styling via inline styles or CSS variables.