How to Create Dynamic Media Queries with Styled-Components? - reactjs

Question

I am trying to use the following approach below to not cause memory overload:
${MediaXS} {
font-size: 0.77rem;
}
Instead of using this approach below, which causes memory problems because it is an array:
$ {MediaXS`
color: red
`}
But I don't know the correct way to export to use with the first example, what should I do?
MY CODE:
import { css } from "styled-components";
export const MediaXS = css`
#media only screen and (min-width: 320px) {
}
`;
export const MediaSM = css`
#media only screen and (min-width: 576px) {
}
`;
export const MediaMD = css`
#media only screen and (min-width: 768px) {
}
`;
export const MediaLG = css`
#media only screen and (min-width: 992px) {
}
`;
export const MediaXL = css`
#media only screen and (min-width: 1200px) {
}
`;

Answer 1

I believe you can do something like this:
// configure screen width thresholds
const ScreenSizes = {
DESKTOP: 992,
TABLET: 768,
PHONE: 576
}
const sizes = {
desktop: ScreenSizes.DESKTOP,
tablet: ScreenSizes.TABLET,
phone: ScreenSizes.PHONE
}
// iterate through sizes and create a media template
const media =
Object
.keys(sizes)
.reduce((acc, label) => {
acc[label] = (...args) => css`
#media (max-width: ${sizes[label] / 16}em) {
${css(...args)}
}
`
return acc
}, {});
// use media methods with styled-component instead of raw #media queries
const StyledContent = styled.div`
width: 100%
${media.desktop`
padding: 10px;
`}
${media.tablet`
padding: 15px;
max-width: 700px;
`}
${media.phone`
padding: 20px;
max-width: 900px;
`}
`;
export class Content extends React.Component {
render() {
return (
<StyledContent>
{ this.children }
</StyledContent>
);
}
}
Credits to Ross Bulat, taken from this article:
https://medium.com/#rossbulat/creating-themes-in-react-with-styled-components-6fce744b4e54

Answer 2

I'm using dinamics media with styled-componets of this form:
const tabletStartWidth = 600;
const desktopStartWidth = 768;
const extraLargeStartWidth = 1300;
const responsiveDesign = {
tablet: `#media (min-width: ${tabletStartWidth}px) and (max-width: ${desktopStartWidth - 1}px)`,
desktop: `#media (min-width: ${desktopStartWidth}px) and (max-width: ${extraLargeStartWidth - 1}px)`,
extraLarge: `#media (min-width: ${extraLargeStartWidth}px)`,
};
and in the component e.g:
${responsiveDesign.desktop} {
padding: 5px;
justify-content: "center";
text-align: center;
}
${responsiveDesign.extraLarge} {
padding: 10px;
}
And it works for me.