为何媒体查询无法覆盖React中JSX的内联样式？

我太懂这种明明试了所有办法却毫无进展的崩溃感了！你碰到的问题根源其实是CSS优先级规则——React里的内联样式优先级远高于媒体查询中的类选择器，所以你写的媒体查询规则根本盖不过内联的display: none。下面给你几个靠谱的解决方案：

方案1：用CSS类替代内联样式（最推荐） #

把默认隐藏的逻辑放到CSS类里，媒体查询就能正常覆盖样式了：

首先修改你的CSS：

/* 默认状态下隐藏 */
.blah {
  display: none;
}

/* 小屏幕下显示 */
@media screen and (min-width: 0px) and (max-width: 600px) {
  .blah-ancestor > .blah {
    display: inline; /* inline/inline-block/block都可以，根据需求选 */
  }
}

然后修改JSX，去掉内联的style属性：

// 删掉const hidden = { display: 'none' }这一行
...
<span className="blah">
  <span>blah</span>
  <span>: </span>
  {deleteButton2}
</span>

这种方式完全遵循CSS优先级规则，是最规范的做法。

方案2：用React动态监听媒体查询（适合需要动态逻辑的场景） #

如果因为业务需求必须用内联样式，可以通过React的状态结合window.matchMedia来监听屏幕宽度变化，动态控制样式：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 初始化时判断是否处于小屏幕
  const [isMobileScreen, setIsMobileScreen] = useState(
    window.matchMedia('(max-width: 600px)').matches
  );

  useEffect(() => {
    // 创建媒体查询对象
    const mobileMediaQuery = window.matchMedia('(max-width: 600px)');
    
    // 监听屏幕宽度变化
    const handleScreenChange = (e) => {
      setIsMobileScreen(e.matches);
    };
    
    mobileMediaQuery.addEventListener('change', handleScreenChange);
    
    // 组件卸载时移除监听
    return () => {
      mobileMediaQuery.removeEventListener('change', handleScreenChange);
    };
  }, []);

  return (
    <span 
      className="blah" 
      style={{ display: isMobileScreen ? 'inline' : 'none' }}
    >
      <span>blah</span>
      <span>: </span>
      {deleteButton2}
    </span>
  );
}

这种方法直接在React层面控制样式显示，彻底绕开了CSS优先级的冲突。

方案3：用!important强制覆盖（不推荐） #

虽然可以用!important强制让媒体查询的样式优先级超过内联样式，但这会破坏CSS的优先级体系，后续维护容易出问题，仅作为临时应急方案：

@media screen and (min-width: 0px) and (max-width: 600px) {
  .blah-ancestor > .blah {
    display: inline !important;
  }
}

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