如何在移动视口上隐藏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 的任何引导类似乎都没有效果。我该如何解决这个问题？

Answer 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