Материал-UI: добавление значка к вкладке в материале-ui Tabbar (вкладки)

Question

У меня есть Material-UITabs Компонент с компонентами 5 Tab как дети. Я хотел бы отобразить Badge на вкладке. Значок будет отображать непрочитанные элементы под каждой вкладкой.

У меня есть две версии панели вкладок. Один для рабочего стола со значком и текстом, а другой для мобильного, содержащий только значок. Как я могу позиционировать значок так, чтобы он правильно размещался в обеих версиях. Значок также должен быть видимым, даже если вкладка не выбрана (если я установил значок в качестве дочернего элемента в вкладку, он будет скрыт, если вкладка не будет выбрана).

Answer 1

Вы можете поместить компонент Значка в свойство значка или метки в компоненте Tab. Просто проверьте мой репозиторий на GitHub ->https://github.com/adhed/todo-app

Answer 2

Вы можете сделать это следующим образом:

<Tab label={<Badge badgeContent={this.state.messageCount} color="primary"> 
    Messages 
</Badge>} value="/messages" />