Блог

Есть ли возможность предоставить несколько шрифтов в поставщике темы в react, а затем динамически применять один из шрифтов к разным элементам / компонентам с помощью перехватов или чего-то еще?

BR, Игорь

ДА. Вы можете предоставить несколько шрифтов через конфигурацию темы.

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

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

И в вашем компоненте:

 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>;
};
  

Если вы не хотите создавать два имени класса, вы также можете передать свойство useStyles и установить шрифт внутри класса в соответствии с этим свойством.

Я сделал это, и это сработало, используя createTheme

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