• 1 min

How to use CSS Media Queries with Styled Components in React.js

How to use CSS Media Queries with Styled Components in React.js

Just like regular CSS, you write your Media Queries in your CSS file. In Styled Components, you can include them as well.

column.component.tsxtsx
import styled from 'styled-components'export const Columns = styled.div`    padding-top: 2rem;    display: grid;    gap: 2rem;    @media (min-width: 769px) {        grid-template-columns: 2fr 3fr;    }`

But if you want to make it smart, you set all the sizes in an Object and create a function to call them from your styled-components in React.

Create a file breakpoints.tsx.

breakpoints.tsxtsx
const size = {    xs: '320px',    sm: '768px',    lg: '1024px',    xl: '1200px',}const mediaQueries = (key: keyof typeof size) => {    return (style: TemplateStringsArray | String) => `@media (min-width: ${size[key]}) { ${style} }`}export { size, mediaQueries }

Import the file in the component where you defined your styled-components, and you can easily use your media queries without remembering your exact sizes.

column.component.tsxtsx
// File where you defined your styled componentsimport { mediaQueries } from 'styles/components/breakpoints'export const Columns = styled.div`    padding-top: 2rem;    display: grid;    gap: 2rem;    ${() => mediaQueries('sm')(`grid-template-columns: 2fr 3fr;`)}`

I believe in making it yourself as simple as possible, so hopefully, this solution will help you further.


Thanks!

After reading this post, I hope you learned something new or are inspired to create something new! 🤗

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM’s are always open 😁

RayRay

I’m Ray, a Frontend Developer since 2009 living in the Netherlands. I write about Frontend Development, JavaScript, TypeScript, Angular, CSS, VueJS and a lot more related topics.

Want to reach me for comments or questions on my blog? Send a DM on Twitter @DevByRayRay