CSS-in-JS considerations in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Next.js component using styled-jsx?

Consider this Next.js functional component using styled-jsx for CSS-in-JS styling. What will the text color be when rendered?

NextJS

export default function ColoredText() {
  return (
    <>
      <p>Hello World</p>
      <style jsx>{`
        p { color: blue; }
      `}</style>
    </>
  )
}

A The text 'Hello World' appears in black color (default).

B The text 'Hello World' appears in blue color.

C The text 'Hello World' appears in red color.

D The component throws a syntax error due to missing import.

💡 Hint

Remember that styled-jsx applies scoped styles inside the component.

The styled-jsx block applies the CSS rule p { color: blue; } scoped to this component only. So the paragraph text will be blue.

📝 Syntax

intermediate

Which option correctly applies dynamic styles using styled-jsx in Next.js?

You want to set the background color dynamically based on a prop bgColor. Which code snippet correctly applies this using styled-jsx?

NextJS

function Box({ bgColor }) {
  return (
    <>
      <div className="box">Dynamic Box</div>
      <style jsx>{` ... `}</style>
    </>
  )
}

A <style jsx>{` .box { background-color: bgColor; } `}</style>

B <style jsx>{` .box { background-color: 'bgColor'; } `}</style>

C <style jsx>{` .box { background-color: ${props.bgColor}; } `}</style>

D <style jsx>{` .box { background-color: ${bgColor}; } `}</style>

💡 Hint

Use template literals and the variable name directly inside the CSS string.

Option D correctly uses template literals to inject the bgColor variable into the CSS string. Options A and B treat it as a string or invalid CSS. Option D uses props which is undefined in this scope.

❓ lifecycle

advanced

What happens to styled-jsx styles when a Next.js component unmounts?

In Next.js, when a component using styled-jsx unmounts, what happens to its scoped styles?

A The scoped styles are automatically removed from the DOM to avoid style leaks.

B The styles remain in the DOM and accumulate, potentially causing conflicts.

C The styles are moved to a global stylesheet for reuse by other components.

D The styles cause a runtime error if the component unmounts without cleanup.

💡 Hint

Think about how scoped CSS-in-JS libraries manage styles to avoid conflicts.

Styled-jsx automatically removes the scoped styles from the DOM when the component unmounts to prevent style leaks and conflicts.

🔧 Debug

advanced

Why does this Next.js component's styled-jsx CSS not apply?

Look at this component code:

export default function Test() {
  return (
    <>
      
Hello
      
    
  )
}

The text color stays black. Why?

A The <style jsx> block must be placed outside the component return statement.

B The className should be 'text' without quotes for styled-jsx to work.

C The CSS selector is too specific; styled-jsx scopes styles differently and expects just 'p' or '.text'.

D The component is missing an import for styled-jsx.

💡 Hint

Styled-jsx scopes styles by rewriting selectors internally.

Styled-jsx scopes styles by adding unique attributes to elements. Using a combined selector like p .text can cause the style not to match because the generated attribute is on the element, so simpler selectors like .text or p work better.

🧠 Conceptual

expert

Which is a key advantage of CSS-in-JS in Next.js compared to global CSS files?

Choose the most accurate advantage of using CSS-in-JS (like styled-jsx) in Next.js over traditional global CSS files.

A CSS-in-JS scopes styles to components, preventing unintended style overrides and improving maintainability.

B CSS-in-JS always results in smaller CSS bundle sizes than global CSS files.

C CSS-in-JS eliminates the need for any CSS knowledge since styles are auto-generated.

D CSS-in-JS styles load faster because they are compiled to inline styles in the browser.

💡 Hint

Think about how CSS-in-JS helps avoid style conflicts in large apps.

CSS-in-JS scopes styles to components, so styles do not leak or override each other unintentionally. This improves maintainability and reduces bugs. The other options are incorrect because CSS-in-JS does not guarantee smaller bundles, does not remove the need to understand CSS, and styles are not always inline but scoped.