menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Next.js / styled components - @media breakpoint - change image content

June 26, 2021 at 11:25am

Next.js / styled components - @media breakpoint - change image content

June 26, 2021 at 11:25am (Edited 3 months ago)
Hi! I have following piece of code, which runs in dev mode (npm run dev), but bugs out, when published live (npm run build + export [nextjs static site]):
[code] import styled from "styled-components"; import { breakpoint } from "../../../styles/breakpoints";
const ProjectPage = (props) => {
const ProjectImage = styled.divwidth: 90vw; height: 45vw; content: url(${props.pageData.imgMedium}); ${breakpoint.ld} { content: url(${props.pageData.imgLarge}); };
return ( .. <ProjectImage /> .. ); }; [/code]
When the screen size changes, and the media query fires, the image gets properly replaced by its ld/md version. However, when i follow a <Link> to another page (same page component- just different data), the old image stays in place (does not get replaced by a new image). In dev mode it works properly (an image of the previous page is replaced by a new image for the appropriate new page).
It might be a problem with DOM not getting refreshed by NextJS (but only for static export/live). As soon as i remove the 'content' css property with an in-component prop <ProjectImage /> to <ProjectImage src={props.pageData.imgMedium} /> then everything works. But then i can not provide different image sizes (versions) for different screen resolutions (which is actually what i want to achieve).. So my question actually relates to how to correctly provide different images for different breakpoints/screen resolutions?
Please forgive me if this is Next.js related problem/bug to be posted on their forums - im just a noob learning both next and styled components and a little lost as to what the best approach to solve this problem is - will appreciate any help!
No messages yet