Material UI tabs , Not able to add the text-overflow elipses to the span tag

◇◆丶佛笑我妖孽 提交于 2020-04-17 19:12:33

问题


I am new to the material UI. here, I have two tabs and that tabs has some content.

Now, I am trying to add the text overflow elipses to this . But the text is in span over there,

<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
              }
            />

Now, Here the label is having a bit more length . So, I am just trying to limit it as max-width : 100px;

But in the material UI it is getting a bit complicated to override .

SO, what I tried is ,

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

But here

I am not able to get which tab has been selected , I mean I want to add that class if the tab is selected.

can any one help me with this ? any solution like with or without typography works for me.

thanks.

  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>

来源:https://stackoverflow.com/questions/60931950/material-ui-tabs-not-able-to-add-the-text-overflow-elipses-to-the-span-tag

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!