Material UI multiple fonts through theme provider in react

Question

Is there option to provide multiple fonts in the theme provider in react, and than dynamically to apply one of the fonts on different elements/components via hooks or something else?

BR, Igor

Answer 1

Yes. You can provide multiple fonts through the theme configuration.

const theme = createMuiTheme({
  typography: {
    a: {
       fontFamily: "Roboto",
       fontSize: 12
    },
    b: {
       fontFamily: "Helvetica",
       fontSize: 14
    } 
  }
});

<ThemeProvider theme={theme}>
  <... />
</ThemeProvider>

And in your component:

const useStyles = makeStyles((theme) => ({
  textA: {
    ...theme.typography.a,
  },
  textB: {
    ...theme.typography.b,
  }
}));

const Greeting = ({useA}) => {
  const classes = useStyles();
  return <p className={useA ? classes.textA : classes.textB}>Hey</p>;
};

If you don't want to create two class names you can also pass a property to useStyles and set the font inside the class according to this property.