Styled-components切回桌面端宽度后响应式样式未更新问题

问题原因 #

这个bug是CSS权重规则和styled-components插值处理逻辑共同导致的：

• 首先两层样式的选择器优先级不一样：直接写在MenuItem根上的background-color: green，对应的选择器是styled-components生成的单个组件类名，优先级更低；写在.submenu &块里的样式，最终生成的选择器是.submenu下的MenuItem组件，优先级更高，只要这个高优先级块里存在background-color声明，就一定会覆盖根上的绿色。
• 其次你用了isMobile && 'lightgray'的短路写法，当isMobile为false时，表达式直接返回布尔值false。styled-components对false、null、undefined这类falsy插值的处理逻辑是直接跳过对应CSS属性的更新，不会主动修改或移除该属性已经存在的声明值。

完整触发逻辑：

1. 首次以桌面端宽度打开时，isMobile为false，高优先级块里没有写入background-color声明，浏览器直接应用低优先级的绿色，表现正常。
2. 缩小到移动端尺寸时，isMobile变为true，插值返回lightgray，styled-components在高优先级块里写入background-color: lightgray，因为优先级更高覆盖了绿色，显示浅灰，表现正常。
3. 再次拉宽到桌面端尺寸时，isMobile变回false，插值返回false，styled-components直接跳过background-color属性的更新，高优先级块里残留了之前写入的lightgray值，一直覆盖根样式的绿色，就出现了样式不回退的问题。
   你调试时看到isMobile状态正常更新，是因为JS层面的状态确实变了，只是styled-components没有同步更新对应的CSS属性值。

修复方案 #

方法1（最小改动） #

不要用短路写法返回falsy值，在高优先级块里用三元表达式为两种状态显式指定明确的属性值，保证每次状态变化时styled-components都能拿到确定的值完成更新：

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

  .submenu & {
    // 显式指定两种状态下的背景色，不要返回falsy值
    background-color: ${({ isMobile }) => isMobile ? 'lightgray' : 'green'};
  }           
`;

如果不想重复书写绿色值，可以把颜色提取成常量复用，减少重复代码。

方法2（更推荐） #

响应式样式直接用原生CSS媒体查询写在styled-components里，不需要额外依赖react-responsive做JS层面的视口监听，既不会出现这类动态样式同步问题，性能也更好：

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

  .submenu & {
    @media (max-width: 524px) {
      background-color: lightgray;
    }
  }           
`;

// 组件里不需要再调用useMediaQuery、传递isMobile属性
function App() {
  return (
    <div>
      <div className="submenu">
        <MenuItem>test</MenuItem>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者gmoniava