提问人：Sam Zuk 提问时间：6/21/2019 更新时间：6/21/2019 访问量：7436
如何在移动视口的material-ui中隐藏标签文本？
How to hide label text in material-ui on a mobile viewport?
问：
我正在努力解决 React 中侧边栏组件的一些响应式设计问题，其中一个问题是标签上的标签文本在较小的屏幕上变得很糟糕。我想隐藏这段文字，但我似乎找不到一个好的方法。
我尝试过将标签文本替换为通过小/x-小屏幕上的引导程序隐藏的 div，但这不起作用
<Tab
icon={<Icon className="material-icons geometry">category</Icon>}
label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
理想情况下，这个文本应该在较小的屏幕上消失，但它就像我根本没有放任何东西一样。事实上，我尝试添加到该 div 的任何引导类似乎都没有效果。我该如何解决这个问题？
答：
8赞
Meera Datey
6/21/2019
#1
如果您使用的是 Material UI，则可以使用隐藏标签来隐藏基于移动视口的标签。当您将标记“Hidden”与 prop xsDown 一起使用时，标签将隐藏在 xs 断点处或下方。
<Tab
icon={<CategoryIcon ></CategoryIcon>}
label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
https://codesandbox.io/s/wispy-bird-vftel?fontsize=14
评论
0赞
Alexander Nied
2/6/2023
仅供参考，这似乎在 v5 中被弃用了。但是，他们有一个迁移建议文档，其中包含在 v5+ 中隐藏内容的惯用方法。
评论