Styled-components' styles fail to update after transitioning from mobile view

Question

Styled-components' styles fail to update after transitioning from mobile view

Click here to view the app:

When you open the app in desktop width, you will see that the div has a green background.
If you reduce the browser width to mobile size, the background of the div should change to gray.
Now, if you increase the browser width back to desktop size, you may notice that the gray background remains instead of changing back to green.

What do you think should have happened?

In the last step, shouldn't the background color be green again as it was in the first step?

Even though the value of isMobile seems to update, the background color doesn't reflect this change as expected.

Below is the code snippet for reference:

import React from 'react';
import styled from 'styled-components';
import { useMediaQuery } from 'react-responsive';

let MenuItem = styled.div`
  height: 100px;
  width: 100px;
  border:1px solid red;
  background-color: green;    

  .submenu & {
    background-color: ${({ isMobile }) => {
      return isMobile && 'lightgray';
    }};
  }           
`;

function App() {
  const isMobile = useMediaQuery({ query: '(max-width: 524px)' });

  return (
    <div>
      <div className="submenu">
        <MenuItem isMobile={isMobile}>test</MenuItem>
      </div>
    </div>
  );
}

export default App;

html css reactjs styled-components

Answer 1

Answer №1

    import React, {useEffect, useState} from 'react';
    import styled from 'styled-components';
    import {useMediaQuery} from 'react-responsive';
    
    let CustomItem = styled.div`
      height: 100px;
      width: 100px;
      border:1px solid red;
      background-color: green;
    `;
    
    function MyApp() {
        const isMobileView = useMediaQuery({query: '(max-width: 524px)'});
        const [bgColor, setBgColor] = useState('green');
    
        useEffect(() => {
            if (isMobileView) setBgColor('silver');
            else setBgColor('green');
        }, [isMobileView])
        
        return (
            <div>
                <div className="submenu">
                    <CustomItem style={{background: bgColor}} isMobile={isMobileView}>test</CustomItem>
                </div>
            </div>
        );
    }

export default MyApp;

Answer 2

    import React, {useEffect, useState} from 'react';
    import styled from 'styled-components';
    import {useMediaQuery} from 'react-responsive';
    
    let CustomItem = styled.div`
      height: 100px;
      width: 100px;
      border:1px solid red;
      background-color: green;
    `;
    
    function MyApp() {
        const isMobileView = useMediaQuery({query: '(max-width: 524px)'});
        const [bgColor, setBgColor] = useState('green');
    
        useEffect(() => {
            if (isMobileView) setBgColor('silver');
            else setBgColor('green');
        }, [isMobileView])
        
        return (
            <div>
                <div className="submenu">
                    <CustomItem style={{background: bgColor}} isMobile={isMobileView}>test</CustomItem>
                </div>
            </div>
        );
    }

export default MyApp;

Answer 3

Answer №2

Here is a revised version:

const ButtonItem = styled.div` 
      height: 100px;
      width: 100px;
      border:1px solid blue;
      background-color: yellow;
    `;

const Dropdown = styled.div`
  ${ButtonItem} {
    background-color: ${({ isDesktop }) => (isDesktop ? `blue` : 'lightyellow')};
  }
  `;

function Main() {
  const isDesktop = useMediaQuery({ query: '(min-width: 768px)' });
  return (
    <>
      <Dropdown isDesktop={isDesktop}>
        <ButtonItem>ButtonItem in Dropdown</ButtonItem>
      </Dropdown>
      <ButtonItem>ButtonItem</ButtonItem>
    </>
  );
}

Stackblitz

Answer 4

Here is a revised version:

const ButtonItem = styled.div` 
      height: 100px;
      width: 100px;
      border:1px solid blue;
      background-color: yellow;
    `;

const Dropdown = styled.div`
  ${ButtonItem} {
    background-color: ${({ isDesktop }) => (isDesktop ? `blue` : 'lightyellow')};
  }
  `;

function Main() {
  const isDesktop = useMediaQuery({ query: '(min-width: 768px)' });
  return (
    <>
      <Dropdown isDesktop={isDesktop}>
        <ButtonItem>ButtonItem in Dropdown</ButtonItem>
      </Dropdown>
      <ButtonItem>ButtonItem</ButtonItem>
    </>
  );
}

Stackblitz

Answer 5

Answer №3

Here is the accurate solution:

https://stackblitz.com/edit/react-t7gqwx?file=src%2FApp.js,src%2Findex.js

Avoid using .submenu &.

Answer 6

Here is the accurate solution:

https://stackblitz.com/edit/react-t7gqwx?file=src%2FApp.js,src%2Findex.js

Avoid using .submenu &.

Styled-components' styles fail to update after transitioning from mobile view

Answer №1

Answer №2

Answer №3

Similar questions

How can I create clickable table entries using php and html?

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

Creating distinct web addresses for various sections of vue.js pagination

Building a Carousel Component in NextJS

Is there a way to create a table that has varying columns for each row?

Glitchy/Crazy CSS3 Animations

Having issues with npx create-react-app not functioning properly due to everything being flagged as deprecated

Exploring a section of a react-chartjs Pie chart

CSS Issue: Hovering Over Link Causes Text to Shift in Internet Explorer

What is your preferred method for adjusting the size of Divs on your webpage according to the screen size?

Is there a way to prevent EasyTabs from automatically selecting the second tab?

Creating a responsive YouTube video embed within a div container with a fixed background image

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

React - Issue with useState not displaying updated values

Guide on integrating React with Node.js and HTML

We encountered an issue loading the resource: the server has returned a 404 (Not Found) error message and a 403 Forbidden error message. However, the resource functions properly on Codepen and localhost

Encountering a Next.js Redux Persist Issue - SyntaxError: Unable to utilize import statement in an external module

Issue with JQUERY where HTML select element is not visible

Combine the points of individual letters in Scrabble using jQuery

Having difficulty aligning the button in the center