adding my custom variants in typography mui-CodePudding

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 Home

I have updated imports in the MUI theme config file.

CodePudding user response：

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