Material-ui v1标签标签包装错误

Posted 2021-04-21

使用Material UI @next v1.0.0 beta 32：

---

选项卡标签在较小的设备上按预期包装。

但是包装使它们改变了字体大小，反过来，在一些屏幕宽度中，不需要包装文本。

所以我最终得到了这个：带有非包装标签和不同字体大小的标签。

沙箱示例：https://codesandbox.io/s/o7worrr32q

为了看到所描述的结果，使窗口足够窄以至少包含1个标签标签，但不是全部。

我用这种方式覆盖了包裹的样式：

<Tab
  value={value}
  label='my label'
  classes={{
     root: classes.tab,
     rootPrimarySelected: classes.selected,
     labelWrapped: classes.labelWrapped
  }}
/>

和我的风格：

 labelWrapped: {
   fontSize: '0.875rem'
 },

this gif animation中说明的问题是，当您单击其他选项卡时，文本会另外包装和展开，看似没有理由。

我的猜测是填充在某处发生变化，但我无法弄明白。

答案

这比我想到的更容易：

我只需要使用MUI提供的css覆盖labelWrapped，如the MUI API中所述：

<Tab
   aria-label="aria description"
   label="Wrapping Label"
   icon={<Icon />}
   value={x}
   classes={{
      root: classes.root,
      labelContainer: classes.labelContainer,
      rootInheritSelected: classes.rootInheritSelected,
      labelWrapped: classes.labelWrapped,
   }}
   component={Link}
   to={{
     pathname: '/my/router/url',
     search: this.props.location.search,
   }}
/>

和我最重要的风格：

const styles = theme => ({
  root: {
    minWidth: 60,
    height: '100%',
    color: 'rgba(255,255,255,0.5)',
    alignItems: 'flex-start',
    paddingBottom: 5,
    wordWrap: 'break-word',
    flex: 1,
    overflowWrap: 'break-word',
    textAlign: 'center',
  },
  labelContainer: {
    paddingLeft: 0,
    paddingRight: 0,
  },

  rootInheritSelected: {
    color: '#FFF',
  },
  labelWrapped: {
    fontSize: '0.875rem',
  },
})