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

Use Media Queries Smarter In Styled Components

Dev By RayRay
ยทMar 15, 2021ยท

1 min read

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

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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

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.js.

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.

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


hashnode-footer.png I hope you learned something new or are inspired to create something new after reading this story! ๐Ÿค— If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. ๐Ÿ‘๐Ÿ’ฐ๐ŸŽ‰๐Ÿฅณ๐Ÿ”ฅ

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 ๐Ÿ˜

Share this


I learn by writing, and write while learning more and more each day!๐Ÿ‘Š A developer is never finished with learning, thinking that is the most stupid thing to do ๐Ÿคฃ