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.

Practice

1. What is a key benefit of using CSS-in-JS in Next.js projects?

easy

A. CSS files load faster than inline styles.

B. It requires no JavaScript knowledge to write styles.

C. It disables server-side rendering automatically.

D. Styles are scoped to components, avoiding global conflicts.

Solution

1. Step 1: Understand CSS-in-JS scope

   CSS-in-JS keeps styles inside components, so styles don't leak globally.

2. Step 2: Compare options

   Options A, B, and D are incorrect because CSS-in-JS requires JavaScript, does not guarantee faster loading than CSS files, and does not disable server-side rendering.

3. Final Answer:

   Styles are scoped to components, avoiding global conflicts. -> Option D

4. Quick Check:

   CSS-in-JS scope = C [OK]

Hint: Remember CSS-in-JS scopes styles to components [OK]

Common Mistakes:

• Thinking CSS-in-JS disables server-side rendering
• Assuming CSS-in-JS needs no JavaScript knowledge
• Believing CSS-in-JS always loads styles faster than CSS files

2. Which of the following is the correct way to define a styled component using the styled-components library in Next.js?

easy

A. const Button = styled.button`background: blue; color: white;`;

B. const Button = styled('button') { background: blue; color: white; };

C. const Button = styled.button({ background: 'blue', color: 'white' });

D. const Button = styled.button = 'background: blue; color: white;';

Solution

1. Step 1: Recall styled-components syntax

   The correct syntax uses tagged template literals: styled.element`styles`.

2. Step 2: Check each option

   const Button = styled.button`background: blue; color: white;`; matches the correct syntax. Options A, B, and C have syntax errors or wrong usage.

3. Final Answer:

   const Button = styled.button`background: blue; color: white;`; -> Option A

4. Quick Check:

   styled-components syntax = D [OK]

Hint: Use backticks with styled.element for styles [OK]

Common Mistakes:

• Using parentheses instead of backticks
• Trying to assign styles as strings without template literals
• Confusing object syntax with styled-components tagged templates

3. Given this Next.js component using styled-jsx:

export default function Box() {
  return (
    <>
      
Hello
      
    </>
  );
}

What color will the text "Hello" appear in the browser?

medium

A. Blue

B. Red

C. Black (default)

D. Green

Solution

1. Step 1: Understand styled-jsx behavior

   styled-jsx applies scoped CSS styles to the component's elements.

2. Step 2: Check the style rule

   The style sets .box color to red, so the div with className "box" will have red text.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   styled-jsx scoped style color = A [OK]

Hint: styled-jsx styles apply only inside component [OK]

Common Mistakes:

• Assuming styles apply globally
• Ignoring className matching
• Confusing default browser text color

4. You wrote this Next.js component using styled-components:

import styled from 'styled-components';

const Title = styled.h1`color: blue;`;

export default function Page() {
  return Hello World;
}

But the text color is not blue in the browser. What is the most likely cause?

medium

A. You forgot to install the styled-components package.

B. You did not wrap your app with ThemeProvider.

C. You did not add the babel-plugin-styled-components for SSR support.

D. You forgot to import React in the component.

Solution

1. Step 1: Identify styled-components SSR issue

   Without babel-plugin-styled-components, styles may not render correctly on server-side in Next.js.

2. Step 2: Check other options

   Options A and D cause errors, not silent style failure. You did not wrap your app with ThemeProvider. is optional for theming, not required for basic styles.

3. Final Answer:

   You did not add the babel-plugin-styled-components for SSR support. -> Option C

4. Quick Check:

   SSR plugin missing = B [OK]

Hint: Add babel-plugin-styled-components for SSR styles [OK]

Common Mistakes:

• Assuming ThemeProvider is required for basic styles
• Forgetting SSR plugin causes silent style issues
• Thinking missing React import causes style failure

5. You want to create a Next.js component that changes its background color based on a prop using styled-components. Which code snippet correctly implements this dynamic styling?

hard

A. const Box = styled.div`background: ${props => props.bgColor};`;

export default function ColoredBox() {
return Hi;
}

B. const Box = styled.div`background: props.bgColor;`;

export default function ColoredBox() {
return Hi;
}

C. const Box = styled.div({ background: props.bgColor });

export default function ColoredBox() {
return Hi;
}

D. const Box = styled.div`background: bgColor;`;

export default function ColoredBox() {
return Hi;
}

Solution

1. Step 1: Understand dynamic props in styled-components

   Use a function inside template literals to access props: ${props => props.propName}.

2. Step 2: Check each option

   const Box = styled.div`background: ${props => props.bgColor};`; export default function ColoredBox() { return Hi; } correctly uses the function syntax. Options B, C, and D misuse props or syntax.

3. Final Answer:

   const Box = styled.div`background: ${props => props.bgColor};`; export default function ColoredBox() { return Hi; } -> Option A

4. Quick Check:

   Dynamic props in styled-components = A [OK]

Hint: Use ${props => props.value} for dynamic styles [OK]

Common Mistakes:

• Writing props.bgColor directly inside template literal
• Using object syntax without function for props
• Forgetting to use arrow function for dynamic values