Как скрыть текст метки в material-ui на мобильном экране?
Я работаю над исправлением некоторых проблем адаптивного дизайна с компонентом боковой панели в React, и одна проблема с ним заключается в том, что текст метки на вкладках становится ужасно сморщенным на небольших экранах. Я хочу скрыть этот текст, но не могу найти хороший способ сделать это.
Я попытался заменить текст метки на div, который скрыт через загрузку на маленьких/х-маленьких экранах, но это не работает.
<Tab
icon = {<Icon className = "material-icons geometry">category</Icon>}
label = {<div className = ".hidden-xs .hidden-sm">GEOMETRY</div>}
value='a' />
В идеале этот текст должен исчезнуть на небольших экранах, но он ведет себя так, как будто я вообще ничего там не помещал. Фактически, любые классы начальной загрузки, которые я пытаюсь добавить в этот div, похоже, не имеют никакого эффекта. Как я могу это исправить?
Ответы 1
Если вы используете Material UI, вы можете использовать скрытый тег, чтобы скрыть метку на основе мобильного окна просмотра. Когда вы используете тег «Скрытый» с реквизитом xsDown, метка будет скрыта в точке останова xs или ниже.
<Tab
icon = {<CategoryIcon ></CategoryIcon>}
label = {<Hidden xsDown>GEOMETRY</Hidden>}>
</Tab>
Можете ли вы попробовать добавить этот класс .d-sm-block вместо этого .hidden-xs .hidden-sm