Вкладки пользовательского интерфейса материала, Невозможно добавить переполнения текста в тег span - PullRequest
Новая
       30

Вкладки пользовательского интерфейса материала, Невозможно добавить переполнения текста в тег span

0 голосов
/ 30 марта 2020

Я новичок в пользовательском интерфейсе материала. здесь у меня есть две вкладки, и у этих вкладок есть некоторое содержание.

Теперь я пытаюсь добавить к этому 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;

Но в пользовательском интерфейсе материала становится немного сложнее переопределить.

ТАК, что я пробовал, 

 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>
...