Material-UI：在material-ui Tabbar（Tabs）中为标签添加徽章

Question

我有Material-UI Tabs组件，其中有5个Tab组件作为子组件。我想在标签上显示Badge。徽章会在每个标签下显示未读项目。

我有两个版本的标签栏。一个用于带有图标和文本的桌面，另一个用于包含图标的移动设备。我怎么能定位徽章，以便它在两个版本上正确放置。即使未选中制表符，也应该可以看到徽章（如果我将徽章作为子项设置为制表符，则在未选中制表符时将隐藏它。）

Answer 1

你可以这样做：

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

Answer 2

您可以将Badge组件放入Tab组件中的icon或label属性中。只需在GitHub上查看我的回购 - ＆gt; https://github.com/adhed/todo-app