Material-UI v4自定义主题字号后SpeedDial组件布局异常如何解决

Material UI v4 全局字号调整最佳实践 #

直接在typography.fontSize字段修改全局基准字号是官方推荐的标准做法，该值默认14px，所有组件的字体、自适应元素尺寸都会基于该值通过rem单位换算实现全局等比缩放。

Speed Dial图标错位原因 #

该问题属于Material UI v4的版本特性：Fab、SpeedDial相关组件的默认宽高、图标容器高度为硬编码px单位，没有跟随全局基准字号做适配，因此全局字号放大后，图标尺寸变大但外层容器尺寸不变，导致错位。

修复方案 #

无需单独修改业务组件样式，只需在主题配置的overrides字段下统一覆写对应组件的全局样式即可，参考配置如下：

const themeConfig = {
  typography: {
    fontSize: 20,
  },
  // 全局覆写异常组件样式
  overrides: {
    MuiSpeedDialIcon: {
      root: {
        // 按字号缩放比例调整图标容器高度，也可直接设为auto
        height: 'calc(24px * 20 / 14)',
      }
    },
    MuiFab: {
      root: {
        // 同步按比例调整Fab按钮宽高，也可替换为rem单位实现自动适配
        width: 'calc(56px * 20 / 14)',
        height: 'calc(56px * 20 / 14)',
      }
    }
  }
};

关于是否需要全量调整组件样式的说明 #

• 不需要逐一设置所有组件的宽高、边距参数，Material UI v4中90%以上的组件都已经完成了基准字号的适配，默认会跟随typography.fontSize自动调整尺寸。
• 仅少数遗留了硬编码px单位的组件（多为lab下的实验性组件、Fab这类特殊交互组件）需要单独覆写样式，后续遇到同类错位问题时，仅需在overrides下新增对应组件的全局适配规则即可。

内容的提问来源于stack exchange，提问作者Jie.Zhang