Material-UI：自定义主题字体大小会导致部分组件布局异常

Question

我用的是 Material-UI 自定义主题然后设置字体大小为 20。

const themeConfig = {
  typography: {
    fontSize: 20,
  },
};

我发现快速拨号组件的图标变大了，但图标不在按钮的中心。 字体大小只影响SVG图标大小，按钮宽度和高度值和以前一样。

.MuiSpeedDialIcon-root {
    height: 24px;
}
.MuiFab-root {
    width: 56px;
    height: 56px;
}

我的问题是在主题配置中更改字体大小的好模式是什么？或者我需要自己在主题配置中设置所有组件的宽度、高度、边距等？

这里是 Material-UI 模块版本列表。

"@material-ui/core": "4.12.3",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "4.0.0-alpha.60",
"@material-ui/system": "4.12.1",

Answer 1

将.MuiSpeedDialIcon-root 中的height 设置为fontSize

const themeConfig = {
  typography: {
    fontSize: 20,
  },

  overrides: {
    MuiSpeedDialIcon: {
      root: {
        height: 20
      }
    }
  }
};