Estoy tratando de implementar mi propia tipografía para mi proyecto mecanografiado nextjs. No puedo configurar mi código para ello, por lo que no funciona, ¿alguien puede ayudarme o guiarme sobre cómo introducir mi propia tipografía?
archivo tipografia.ts:
export const typography = { fontFamily: 'Recoleta, Fira Sans', htmlFontSize: 10, h7: { 'fontFamily': 'Recoleta', 'fontSize': '1.0rem', 'fontWeight': 'bold', 'fontStretch': 'normal', 'fontStyle': 'normal', 'lineHeight': 1.4, } };muiThemeOveride.ts:
import {createTheme} from '@mui/material/styles'; import {responsiveFontSizes} from '@mui/material/styles'; import { typography } from "./typography"; declare module '@mui/material/styles' { interface TypographyVariants { h7: React.CSSProperties; } // allow configuration using `createTheme` interface TypographyVariantsOptions { h7?: React.CSSProperties; } } // Update the Typography's variant prop options declare module '@mui/material/Typography' { interface TypographyPropsVariantOverrides { h7: true; h3: false; } } export const theme = responsiveFontSizes(createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { outlined: { borderColor: black, color: black, '&:hover': { borderColor: black, } } }, }, }, typography }));índice.ts
const Home: NextPage = () => { return ( <div> <Head> <title>Create Next App</title> <meta content="Generated by create next app" name="description" /> <link href="/favicon.ico" rel="icon" /> </Head> <main> <Typography variant="h7" >HELLO</Typography> </main> </div> ) } export default HomeHe actualizado las importaciones en el archivo de configuración del tema MUI.
Creo que te falta la importación para la anulación de tipografía que has escrito.
Debe importar el archivo typography.ts en el archivo muiThemeOveride.ts y hacer lo siguiente.
import { typography } from "./typography"; export const theme = responsiveFontSizes(createTheme({ components: { MuiButton: { styleOverrides: { outlined: { borderColor: black, color: black, '&:hover': { borderColor: black, } } }, }, }, typography }));