Media Queries in Emotion Styled Components
To clarify, there was mainly a minor syntax error in what the OP had posted (there should be no additional backticks in the interpolated string).
A full example of his code including type annotations would look like:
const breakpoints: { [index: string]: number } = { sm: 500, md: 768, lg: 992, xl: 1200,};const mq = Object.keys(breakpoints) .map((key) => [key, breakpoints[key]] as [string, number]) .reduce((prev, [key, breakpoint]) => { prev[key] = `@media (min-width: ${breakpoint}px)`; return prev; }, {} as { [index: string]: string });const Container = styled.div` ${mq["sm"]} { max-width: 750px; } ${mq["md"]} { max-width: 970px; } ${mq["lg"]} { max-width: 1170px; }`;