CODEWITHSUNDEEP
reactjsmaterial-ui
Игор Ташевски
Игор Ташевски

Reputation: 681

Material UI multiple fonts through theme provider in react

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

Upvotes: 1

Views: 6771

Answers (2)

Hayyaun
Hayyaun

Reputation: 316

I did this and it worked using createTheme

const theme = createTheme({
    ...
    typography: { fontFamily: 'Montserrat, Yekan' },
});

Upvotes: 1

Michael S. Molina
Michael S. Molina

Reputation: 732

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.

Upvotes: 2

Related Questions