Hidden 布局组件在响应式下不生效是怎么回事？

欧阳琪帆提问于 2026-02-26 23:24:21 阅读 15

组件

我在用 Ant Design 的 Hidden 组件做响应式布局，想在小屏隐藏某个区块，但加了 visible 属性后完全没反应，元素还是显示着。是不是我用法错了？

试过按文档写法，也检查了断点是否匹配，但就是不隐藏。代码如下：

<Hidden xsUp>
  <div>这段内容应该在所有屏幕都隐藏</div>
</Hidden>

Hidden隐藏

我来解答赞 1 收藏

反馈

1 条解答

Prog.淑萍 Lv1

你这个写法本身就有问题，Hidden 组件在 Ant Design 里早就废弃了，而且它的逻辑是反直觉的——它不是按你写的 xsUp 来「隐藏小屏」，而是「在满足这个断点时隐藏」。

也就是说 <Hidden xsUp> 的意思是：「当屏幕宽度 ≥ 576px 时隐藏」，那你在手机上（小屏）反而看不见隐藏效果，只有在平板、电脑上才隐藏，小屏默认显示。

如果你想要「小屏隐藏」，应该用 xsDown 或者更明确的 only="xs"，比如：

<Hidden xsDown> 表示「在 xs 尺寸（<576px）时隐藏」，也就是手机上隐藏，大屏显示。

但重点来了——Ant Design 从 v4 开始就不再维护 Hidden 组件了，v5 直接删了，所以你要是用的最新版，根本没这个组件，或者只是个空壳子，根本不起作用。

推荐你别折腾 Hidden 了，直接用 CSS 的响应式类或者 useResponsive hook 自己封装更靠谱。比如：

import { useResponsive } from 'antd';



function Demo() {

  const { xs } = useResponsive();

  return !xs ? <div>只在非小屏显示</div> : null;

}

或者用 Tailwind 那套写法也行：<div className="hidden xs:block">（取决于你用没用 Tailwind）。

总之 Hidden 这玩意儿现在属于「祖传 API」，不建议再用了，真要响应式布局，自己写 media query 或者用框架提供的 hook 更稳。

2026-02-27 02:00