Summary - styled-components

Write a themed button family (primary, ghost) with styled-components.

Summary - styled-components

In this group you entered the CSS-in-JS world. styled-components embeds styles into JS; you write CSS in a template literal and get a component.

Props give dynamic styles; a theme gives centralized ones. Dark/light mode is easy with a theme. All styles are isolated and clash-free.

For a consistent design language across a project, the theme approach is a powerful tool.

Exercise styled summary task

Complete the skeleton. Create a styled component DangerButton defined with styled.button\`color: ${props => props.color};\`. Return <DangerButton color="red">Delete</DangerButton>. Export it.

Show example solution

const DangerButton = styled.button`color: ${props => props.color};`;

function App() { return <DangerButton color="red">Delete</DangerButton>; }
export default DangerButton;

Test yourself

Which is wrong?
```
A theme centralizes colors.
```
- styled.button`...` makes a component
- a theme is useless and never used
- ThemeProvider spreads the theme
- props give dynamic styles
Show answer

a theme is useless and never used — A theme is a powerful tool for consistent design.
Summary - styled-components: match the terms

styled.button

Makes a component
${props => ...}

Dynamic value
ThemeProvider

Spreads theme
props.theme

Theme access

Next lesson: What is useReducer?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies