Summary - Styling

Write a styled price tag component with CSS Modules.

Summary - Styling

In this group you saw three styling methods: className + CSS (global, simple), CSS Modules (scoped, safe) and inline style (dynamic, quick).

In JSX write className not class; in inline objects use camelCase. Modules prevent clashes; inline changes with state.

Later we will see styled-components and theming; for now these three cover most work.

Exercise Styling summary task

Complete the skeleton. Write a StatusBadge component; import useState. Define const [active, setActive] = useState(false);. Return <span className={active ? "on" : "off"}>{active ? "On" : "Off"}</span>. Export it.

Show example solution

import { useState } from "react";

function StatusBadge() {
  const [active, setActive] = useState(false);
  return <span className={active ? "on" : "off"}>{active ? "On" : "Off"}</span>;
}

export default StatusBadge;

Test yourself

Which is wrong?
```
CSS dashes become camelCase.
```
- JSX uses className
- inline uses background-color
- inline takes dynamic values
- Modules prevent clashes
Show answer

inline uses background-color — inline uses backgroundColor (camelCase).
Summary - Styling: match the terms

className

CSS class
styles.x

Modules class
style={{}}

Inline object
camelCase

Property name

Next lesson: What is styled-components?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies