Material UI @next v1.0.0 beta32标签换行引发字体大小不一致问题

这个坑我之前在项目里也踩过！本质是这个版本的Tabs组件在响应式适配时，默认的媒体查询规则会在标签换行时强制缩小字体，哪怕后续调整窗口宽度后标签不需要再换行，字体大小也不会自动恢复，最终导致同组标签里有的字体正常、有的偏小，非常影响视觉一致性。

具体解决方法 #

下面给你几个可行的方案，你可以根据自己的需求选择：

方案一：自定义样式强制统一字体大小

通过withStyles高阶组件覆盖Tabs的默认响应式样式，让标签不管换不换行，都保持统一的字体尺寸：

import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';

const CustomTabs = withStyles({
  root: {
    // 覆盖小屏幕下的默认字体缩小规则
    '@media (max-width: 600px)': {
      '& .MuiTab-root': {
        fontSize: 'inherit !important', // 继承父元素的字体大小，和其他标签保持一致
        minWidth: 'auto !important', // 让标签宽度自适应内容，避免不必要的换行
      },
    },
  },
})(Tabs);

之后直接使用CustomTabs替代原生的Tabs组件即可。

方案二：允许换行但统一字体

如果你希望标签在小屏幕下依然可以换行，但所有标签的字体大小始终保持一致，可以调整样式为：

const CustomTabs = withStyles({
  root: {
    '& .MuiTab-root': {
      fontSize: '0.875rem', // 手动设置统一的字体大小，替换成你需要的尺寸
      whiteSpace: 'normal', // 允许标签内容自动换行
      textOverflow: 'unset', // 取消默认的省略号，让内容完整显示
    },
  },
})(Tabs);

方案三：改用滚动式标签避免换行

另一种更彻底的思路是直接禁用换行逻辑，让标签在小屏幕下滚动展示，从根源上避免字体大小变化的问题：

<Tabs variant="scrollable" scrollButtons="auto">
  {/* 这里放置你的Tab子组件 */}
</Tabs>

问题根源说明 #

在Material UI v1.0.0 beta32的默认样式中，Tabs组件针对小屏幕设置了媒体查询：当容器宽度不足时，会把MuiTab-root的字体缩小到0.75rem，同时固定minWidth为64px。但这个样式规则是“单向生效”的——当窗口宽度再次变大时，字体不会自动恢复到原来的大小，这就导致了部分标签字体偏小、部分正常的尴尬情况。我们通过自定义样式强制覆盖这个规则，就能解决这个问题。

内容的提问来源于stack exchange，提问作者dauffret