What is the difference between CSS Modules and styled-components?

What is the difference between CSS Modules and styled-components?

• A. CSS Modules scope CSS to the component with locally generated class names; styled-components is a CSS-in-JS library that uses JavaScript to apply styles.
• B. Styled-components uses className hashing but CSS Modules do not.
• C. CSS Modules require no configuration, while styled-components cannot theme.
• D. CSS Modules and styled-components both rely on global CSS.

Answer: (A)

The difference being tested is how styling is applied and scoped. CSS Modules keep CSS local to each component by transforming class names into locally scoped, hashed identifiers, so styles don’t leak globally. Styled-components takes a CSS-in-JS approach: you write CSS inside JavaScript using template literals, and the library generates a unique class name and injects the styles at runtime, which also enables dynamic styling through props and theming. That’s why the statement is the best: it accurately contrasts component-scoped CSS with a JavaScript-driven styling approach. Keep in mind that CSS Modules typically requires some build configuration to enable module CSS, and styled-components can be themed via a ThemeProvider. Both approaches avoid global CSS by default, though you can opt into global styles if you need them.

The difference being tested is how styling is applied and scoped. CSS Modules keep CSS local to each component by transforming class names into locally scoped, hashed identifiers, so styles don’t leak globally. Styled-components takes a CSS-in-JS approach: you write CSS inside JavaScript using template literals, and the library generates a unique class name and injects the styles at runtime, which also enables dynamic styling through props and theming. That’s why the statement is the best: it accurately contrasts component-scoped CSS with a JavaScript-driven styling approach.

Keep in mind that CSS Modules typically requires some build configuration to enable module CSS, and styled-components can be themed via a ThemeProvider. Both approaches avoid global CSS by default, though you can opt into global styles if you need them.