material-ui - 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",

标签： material-ui

Answer 1

一组height到.MuiSpeedDialIcon-rootfontSize

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

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