Responsive Styled Components | Breakpoints Function

Jordan Eckowitz
2 min readJun 28, 2020

--

I recently discovered an incredibly useful feature in Styled Components that allows sharing blocks of CSS properties between components. Here’s a simple example where I create a variable called sharedProps that is passed into two different components, StyledThis and StyledThat.

One thing that I have always found clunky in CSS is creating responsive breakpoints using @media queries. Let’s look at an example.

Here I have used @media queries to change padding, font-size and margin with regard to screen breakpoints.

Now let’s write a function that can utilize what we’ve learnt about sharing code in Styled Components and generate these media queries. We want the function to take in arguments for:

  • The CSS property to which we’re applying the screen breakpoints.
  • The units of the CSS property.
  • The breakpoint values (of the screen as well as the CSS property).
  • The media query type, i.e.: max-width, min-width, max-height, min-height.

And here it is…

In the breakpoints function above the final line may be a bit confusing. The Styled Components import css is a Tagged Template Literal (ref). This means that css`` and css([``]) are equivalent. This second implementation can be useful since it lets us set a template literal to a variable and then pass the variable into css, hence css([breakpointProps]).

We can now use this function to get rid of our clunky @media queries and reformat our styled components as shown below.

This is a massive improvement — far more legible and easy to maintain!

For good measure I’ve put this example in Code Sandbox. Hopefully you’ll find it useful too.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Responses (2)

Write a response