Why styling options matter in NextJS - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

How does CSS Modules affect component styling in Next.js?

Consider a Next.js component styled with CSS Modules. What is the main effect of using CSS Modules on the component's styles?

NextJS

import styles from './Button.module.css';

export default function Button() {
  return <button className={styles.primary}>Click me</button>;
}

A Styles are ignored unless imported in _app.js.

B Styles are applied globally to all buttons across the app.

C Styles are scoped locally to the Button component, preventing conflicts with other components.

D Styles are converted to inline styles automatically.

💡 Hint

Think about how CSS Modules prevent style clashes by scoping.

CSS Modules generate unique class names scoped to the component, so styles do not leak or conflict globally.

📝 Syntax

intermediate

Which Next.js styling method supports dynamic theming with JavaScript variables?

Next.js supports various styling options. Which method allows you to use JavaScript variables directly to change styles dynamically?

A Static CSS files

B Styled JSX

C Global CSS files

D CSS Modules

💡 Hint

Look for the styling method that supports embedding JS expressions inside styles.

Styled JSX allows writing CSS inside components with support for JavaScript expressions, enabling dynamic styling.

🔧 Debug

advanced

Why does this Next.js component's CSS Module style not apply?

Given this Next.js component, why does the button not get the expected red background?

NextJS

import styles from './Button.module.css';

export default function Button() {
  return <button className="styles.redBackground">Press me</button>;
}

/* Button.module.css */
.redBackground {
  background-color: red;
}

A The className should use curly braces: className={styles.redBackground} instead of a string.

B The CSS file must be imported in _app.js to work.

C The CSS class name is invalid because it starts with a lowercase letter.

D Next.js does not support CSS Modules for buttons.

💡 Hint

Check how className is assigned in JSX when using CSS Modules.

When using CSS Modules, className must be set with curly braces to reference the imported styles object, not as a string.

🧠 Conceptual

advanced

What is a key advantage of using Tailwind CSS with Next.js over traditional CSS files?

Tailwind CSS is popular with Next.js projects. What is a main advantage of using Tailwind CSS compared to writing traditional CSS files?

A Tailwind provides utility classes that speed up styling without writing custom CSS rules.

B Tailwind automatically scopes styles to components like CSS Modules.

C Tailwind requires no configuration to work with Next.js.

D Tailwind styles are inline styles applied via JavaScript.

💡 Hint

Think about how Tailwind changes the way you write styles.

Tailwind offers ready-made utility classes that let you style elements quickly without writing separate CSS files.

❓ state_output

expert

What is the rendered output when using styled-jsx with dynamic props in Next.js?

Consider this Next.js component using styled-jsx with a dynamic color prop. What color will the button text be when rendered?

NextJS

export default function ColorButton({ color }) {
  return (
    <>
      <button>Click me</button>
      <style jsx>{`
        button {
          color: ${color};
        }
      `}</style>
    </>
  );
}

// Usage: <ColorButton color="blue" />

A The component will throw a syntax error due to template literal usage.

B The button text color will be black (default).

C The button text color will be red regardless of the prop.

D The button text color will be blue.

💡 Hint

Check how styled-jsx supports JavaScript variables inside styles.

Styled-jsx allows embedding JavaScript variables inside CSS using template literals, so the color prop sets the button text color.