Styling with props

Learn to pass a prop to a styled component to change its style.

Styling with props

styled-components can take props. Inside the template you produce dynamic values with ${props => props.color}.

So <Btn color="red" /> makes the button red. The same component works in different colors with different props.

This makes components reusable and flexible.

Conditional styling

You can also make styles conditional on props: ${props => props.primary ? "blue" : "gray"}. One component then works as both a primary and a secondary button.

This saves you from writing many class names; the logic sits in one place.

Later we will centralize colors with a theme; for now props are enough.

Exercise Colored button

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

Show example solution

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

function App() { return <ColorButton color="green">OK</ColorButton>; }
export default ColorButton;

Test yourself

How do you access props in the template?
```
A dynamic value is made with a function inside ${}.
```
- ${props.x}
- this.props.x
- props.x
- ${props => props.x}
Show answer

${props => props.x} — Read props with a function inside ${}.

Styling with props: fill in the missing part

color: ${props => props.____};

Show answer

color: ${props => props.color};

Styling with props: match the terms

${props => ...}

Dynamic value
color="red"

Passing a prop
props.primary ?

Condition
<Btn />

Usage

Next lesson: Using themes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies