Material-UI: Customize theme Font Size then some component layout will be abnormal

user_14519247 0
Viewed 586

I'm used Material-UI customize theme then set the font size to 20.

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

I find the Speed Dial Component's Icon get bigger but the icon isn't at center at the button. The font size just effect the SVG icon size, the button width and height value is same as before.

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

My question is what the good pattern to change the font size at theme config? Or I need to set all the component width, height, margin, etc, at the theme config by my self?

Here is Material-UI module version list.

"@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
1 Answers

Set height of .MuiSpeedDialIcon-root to fontSize

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

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