What is styled-components?

Learn the basics of writing styles inside JS with styled-components.

What is styled-components?

styled-components embeds styles into JavaScript. You define a component as styled.button\`...\` and write CSS inside.

The result is an isolated component with its own class names; no className clashes. Style and markup live in one place.

This method belongs to the "CSS-in-JS" family; it is powerful for theming and dynamic props. You install the package to use it.

Template syntax

styled-components uses a JavaScript template literal. You write CSS between backticks (`); it is normal CSS syntax.

The result is a React component; you use it as <Btn />. The class name stays stable across renders; isolation is guaranteed.

Later we will send props to this template and make colors dynamic.

Exercise Styled button

Complete the skeleton. Create a styled component BlueButton defined with styled.button\`color: blue;\`. Return <BlueButton>Send</BlueButton>. Export it.

Show example solution

const BlueButton = styled.button`color: blue;`;

function App() { return <BlueButton>Send</BlueButton>; }
export default BlueButton;

Test yourself

Which family does styled-components belong to?
```
CSS is written inside a JavaScript file.
```
- inline style
- CSS Modules
- CSS-in-JS
- global CSS
Show answer

CSS-in-JS — The styled component is defined inside JS.

What is styled-components: fill in the missing part

const Btn = styled.button`____`

Show answer

const Btn = styled.button`color: blue;`

What is styled-components: match the terms

styled.button`...`

Styled component
`...`

Template literal
<Btn />

Usage
CSS-in-JS

Family

Next lesson: Styling with props

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies