Change MUI Font Size for All Components (Full Tutorial!)

Material UI has an effective way to set font size for all components. It also has quick ways for setting font size for components of the same type, and for individual components.

I will show one example of each method. We will customize font size in the TextField, Container, and Typography as seen below:

MUI Font Size
MUI Font Size

Full code can be found in the Resources section.

Change Material UI Font Size with Theme Typography

The MUI default theme includes a font size that gets applied to all components. This is found under theme.typography.fontSize.

I created a custom theme so that I could change the font size:

const CustomFontTheme = createTheme({
  typography: {
    fontSize: 30
  }
});

Changing the theme typography font size did not require much code. However, the custom theme needs to be imported and passed to components using ThemeProvider:

export default function FontSizeTypography() {
  return (
    <>
      <ThemeProvider theme={CustomFontTheme}>
        <TextField defaultValue="Test TextField Text: 30px"></TextField>
      </ThemeProvider>

    </>
  );
}

Any components that are wrapped with ThemeProvider where theme={CustomFontTheme} will now have a default font size of 30. In this case, the TextField will now have the larger font. The TextField component didn’t need any configuration to implement this larger font.

One interesting feature of updating theme.typography.fontSize is that it only accepts a number value, so we can’t pass rems (a string value). However, the 30 value is getting translated to rems in the DOM:

MUI Theme Typography Font Size
MUI Theme Typography Font Size

Change Material UI Font Size with Theme Override

A more targeted approach to theme font size can change default font size for all instances of a component type.

I changed all Container components to have font size of 24px. Here’s the code from CustomFontTheme:

const CustomFontTheme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          fontSize: 24
        }
      }
    }
  }
});

Notice the deep syntax here: components.MuiContainer.styleOverrides.root.fontSize. This uses Theme Overrides to change all instances of Container.

And here’s a Container that inherits this font size:

<ThemeProvider theme={CustomFontTheme}>

  <Container>Test Container Text: 24px</Container>
</ThemeProvider>

The Container does nothing to implement this font size. It simply inherits font size of 24px because it is wrapped with CustomFontTheme.

The override of font size renders in the DOM as 24px unlike theme.typography.fontSize which render in rems.

Change Material UI Font Size with Typography Component

If we only want to change a single component instance’s font size, we don’t want to use theme. Instead, we can either change the component directly using sx={{fontSize: 18}} or pass a Typography component with a custom font size like below:

<Box>
  <Typography noWrap sx={{ fontSize: 18 }}>Test Typography Text: 18px</Typography>
</Box>

The advantage of passing a Typography component is that it comes with additional styling. Also, adding the noWrap prop renders the component with ellipses if the text is too long. We can see that styling in the DOM here:

Resources

Full Code:

//FontSizeTypography.tsx
import { Box, Container, Typography, TextField } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { CustomFontTheme } from "./CustomFontTheme";

export default function FontSizeTypography() {
  return (
    <>
      <ThemeProvider theme={CustomFontTheme}>
        <TextField defaultValue="Test TextField Text: 30px"></TextField>
        <Container>Test Container Text: 24px</Container>
      </ThemeProvider>
      <Box>
        <Typography noWrap sx={{ fontSize: 18 }}>Test Typography Text: 18px</Typography>
      </Box>
    </>
  );
}

//CustomFontTheme.tsx
import { createTheme } from "@mui/material/styles";

const CustomFontTheme = createTheme({
  typography: {
    fontSize: 30
  },
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          fontSize: 24
        }
      }
    }
  }
});

export { CustomFontTheme };

MUI Theme Docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.