React中如何在不同媒体尺寸下重置CSS以使用内联样式？

问题描述 #

在React组件中为div设置了动态内联字体样式：

<div className={s.Tag} style={{ fontSize: `${newSize}px` }}></div>

同时在CSS模块中通过!important强制设置了固定字体大小：

.Tag {
    font-size: 12px !important;
}

尝试在min-width: 1366px的媒体查询中用unset !important重置样式，以让内联样式生效，但未达到预期效果：

@media (min-width: 1366px) {
   .Tag {
      font-size: unset !important;
   }
}

解决方案 #

核心问题在于：unset !important是将字体大小重置为CSS默认值，而非让内联样式优先级生效。带有!important的CSS规则优先级高于普通内联样式，需通过以下方式调整：

方案1：调整CSS媒体查询逻辑，避免全局!important覆盖

将固定字体大小的规则限定在小屏幕下，大屏幕下取消强制样式，让内联样式自然生效：

/* 仅在小屏幕下强制设置12px字体 */
@media (max-width: 1365px) {
  .Tag {
    font-size: 12px !important;
  }
}

/* 大屏幕下不设置强制字体，内联样式自动生效 */
@media (min-width: 1366px) {
  .Tag {
    font-size: unset;
  }
}

方案2：给内联样式添加!important提升优先级

修改React组件的内联样式，加入!important使其优先级高于CSS模块的!important规则：

<div className={s.Tag} style={{ fontSize: `${newSize}px !important` }}></div>

此时原媒体查询的重置规则可保留，内联样式会在大屏幕下生效。

方案3：通过React动态控制className

自定义媒体查询钩子判断屏幕尺寸，动态决定是否应用带有强制样式的类：

// 自定义媒体查询钩子
const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) setMatches(media.matches);

    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    return () => media.removeListener(listener);
  }, [matches, query]);

  return matches;
};

// 组件内使用
const isLargeScreen = useMediaQuery('(min-width: 1366px)');

return (
  <div className={isLargeScreen ? '' : s.Tag} style={{ fontSize: `${newSize}px` }}></div>
);

大屏幕下直接移除强制样式类，内联样式即可直接生效。

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