I am trying to implement my own typography for my typescript nextjs project. I am unable to configure my code for it thus it is not working, can someone please help or guide me how to introduce my own typography.
typography.ts file:
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
}));index.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 HomeI have updated imports in the MUI theme config file.
I think you are missing the import for typography override that you have written.
You need to import typography.ts file in muiThemeOveride.ts file and do the following.
import { typography } from "./typography";
export const theme = responsiveFontSizes(createTheme({
components: {
MuiButton: {
styleOverrides: {
outlined: {
borderColor: black,
color: black,
'&:hover': {
borderColor: black,
}
}
},
},
},
typography
}));