reactjs - 如何在移动视口(viewport)上隐藏 material-ui 中的标签文本？

Question

我正在努力修复 React 中侧边栏组件的一些响应式设计问题，其中一个问题是选项卡上的标签文本在较小的屏幕上会被扭曲。我想隐藏这段文字，但我似乎找不到好的方法。

我试过用在小/超小屏幕上通过 Bootstrap 隐藏的 div 替换标签文本，但这不起作用

<Tab
  icon={<Icon className="material-icons geometry">category</Icon>}
  label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
  value='a' />

理想情况下，这段文字应该在较小的屏幕上消失，但它就像我根本没有放任何东西一样。事实上，我尝试添加到该 div 的任何 Bootstrap 类似乎都没有效果。我该如何解决这个问题？

Answer 1

如果您使用的是 Material UI，则可以使用 Hidden 标签隐藏基于移动视口(viewport)的标签。当您将标签“隐藏”与属性 xsDown 一起使用时，标签将隐藏在 xs 断点处或下方。

<Tab 
   icon={<CategoryIcon ></CategoryIcon>}
   label={<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>

https://codesandbox.io/s/wispy-bird-vftel?fontsize=14