html - 材质 UI 选项卡，无法将文本溢出省略号添加到 span 标签

Question

我是材料 UI 的新手。在这里，我有两个选项卡，这些选项卡有一些内容。

现在，我正在尝试将text overflow elipses. 但是文本在那边，

<Tab
              key={`${tab}_${index}`}
              classes={{
                root: css.tabRoot,
                selected: css.tabSelected,
                wrapper: css.tabIconWrapper,
                labelIcon: css.tabLabelIcon
              }}
              disableRipple
              label={tab.label}
              value={tab.value}
              icon={
                tab.icon ? <Icons className={css.tabIcons} iconname={tab.icon} /> : null
              }
            />

现在，这里的标签有更多的长度。所以，我只是想把它限制为max-width : 100px;

但是在材质 UI 中，覆盖变得有点复杂。

所以，我尝试的是，

 label={<Typography className={selectedTab ? '' : ''}>{tab.label}</Typography>}

但在这儿

我无法获得已选择的选项卡，我的意思是如果选择了选项卡，我想添加该类。

谁能帮我这个 ？任何像有或没有排版的解决方案都适合我。

谢谢。

  div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;">
   <div class="MuiTabs-flexContainer">
     <button class="MuiButtonBase-root MuiTab-root VIP_tabRoot MuiTab-textColorInherit Mui-selected VIP_tabSelected" tabindex="0" type="button" role="tab" aria-selected="true">
       <span class="MuiTab-wrapper VIP_tabIconWrapper">Test004</span>
    </button>
 </div>
</div>