材质UI通过react中的主题提供程序提供多种字体

Question

是否有在react中的主题提供程序中提供多种字体的选项，然后通过挂钩或其他方式在不同的元素/组件上动态应用其中一种字体？

BR、Igor

Answer 1

是。您可以通过主题配置提供多种字体。

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，并根据该属性设置类内的字体。

Answer 2

我这样做了，它使用createTheme工作

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