Everything needed to make your
styled-components 💅 React Application responsive using media queries.
npm install styled-media-responsive
you can use the default breakpoints or set your own by passing them to the function. See example below
defaultDevices:phone:max: 768tablet:min: 768max: 1160desktop:min: 1160max: 1400large:min: 1400
Importing the default breakpoints into your app (if needed):
The order in which we declare these matter since they share a starting and ending point, the best practice would be to declare the media queries in descending order (unless that's not the desired behaviour)
// If using the default breakpoints:const media =// If using your own breakpoints:const breakpoints =smallPhone:max: 576mediumPhone:min: 576max: 768tablet:min: 768max: 992desktop:min: 992max: 1200reallyLarge:min: 1200const media =---------------------------------// on your styled components definitions// this example assumes you are not defining your own breakpoints, if you are,// you would do media.nameOfYourBreakpointconst SuperComponent = styleddiv`background-color: yellow;`