[material-ui][Typography] Migrating from v4 to v5 issue

[AlejandroSanchez90]

Steps to reproduce

This is my theme

export let theme = createTheme({
  // Colors
  palette: {
    mode: 'dark',
    background: {
      default: colors.darkGray,
    },
    primary: {
      main: colors.teal,
      contrastText: colors.white,
    },
    common: { ...colors },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },

  // Typography
  typography: {
    fontWeightLight,
    fontWeightRegular,
    fontWeightMedium,
    fontFamily: bodyFontFamily,
    h1: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '3.25rem',
      lineHeight: 1.192307692,
      letterSpacing: -0.001923077,
    },
    h2: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '2.625rem',
      lineHeight: 1.19047619,
      letterSpacing: -0.002142857,
    },
    h3: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '2.375rem',
      lineHeight: 1.210526316,
      letterSpacing: -0.001842105,
    },
    h4: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightMedium,
      fontSize: '2rem',
      lineHeight: 1.1875,
      letterSpacing: -0.0021875,
    },
    h5: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightLight,
      fontSize: '1.75rem',
      letterSpacing: -0.002142857,
      lineHeight: 1,
    },
    h6: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightMedium,
      fontSize: '1.375rem',
      letterSpacing: -0.001818182,
      lineHeight: 1,
    },
    subtitle1: {
      fontFamily: headerFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '	1.125rem',
      lineHeight: 1.222222222,
      letterSpacing: -0.002220249,
    },
    subtitle2: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '1.125rem',
      lineHeight: 1.5625,
      letterSpacing: 'normal',
    },
    body1: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '0.875rem',
      lineHeight: 1.1875,
      letterSpacing: 'normal',
    },
    body2: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '0.75rem',
      lineHeight: 1.416666667,
      letterSpacing: 0.001666667,
    },
    button: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      fontSize: '1.125rem',
      lineHeight: 1.333333333,
      letterSpacing: 'normal',
    },
    caption: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      // @ts-ignore
      fontStyle: 'italic',
      fontSize: '0.75rem',
      lineHeight: 1.416666667,
      letterSpacing: -0.0025,
    },
    overline: {
      fontFamily: bodyFontFamily,
      fontWeight: fontWeightRegular,
      textTransform: 'uppercase',
      fontSize: '0.875rem',
      lineHeight: 1.357142857,
      letterSpacing: 'normal',
    },
  },
});

when using the useTheme hook, i can see my custom theme, but when using native mui component, if i inspect them with dev tools, i can see my custom props below been overwritten by default one .css-MuiTypography- root is been overwritten by .MuiTypography-subtitle1

im using the subtitle1 variant

i tried this approach

  components: {
    MuiTypography: {
      styleOverrides: {
        subtitle1: {
          color: colors.red,
          fontSize: '	10.125rem',
        },
      },
    },
  },

but no luck, i can see the color red in the font, but not the size or other properties that are been overwritten, also i have my mode set to dark, but my font is still black, they should be white, so somehow, the custom theme is not been applied correctly

my imports

import { createTheme, Theme, Palette, ThemeProvider as ProviderTheme } from '@mui/material/styles';

Current behavior

No response

Expected behavior

No response

Context

Im trying to update from mui v4 to mui v5, but my custom theme its been overwrite by the default one, in chrome dev tools, i can see my custom theme props, but they been overwritten by the default one

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: typography

[AlejandroSanchez90]

i have an update
this was my theme provider

export const ThemeProvider = ({ children }: ThemeProviderProps) => (
  <StylesProvider generateClassName={generateClassName}>
    <ProviderTheme theme={theme}>
      <CssBaseline />
      <StyledEngineProvider injectFirst>{children}</StyledEngineProvider>
    </ProviderTheme>
  </StylesProvider>
);

i removed the StyledEngineProvider, i had this before because there was some margins that were getting overwritten, removing this, would use my custom theme, but will put these component scoped styles above it, and at the they get overwritten, so my problem its some kind of order change from v4 to v5, i did follow the entire migration documentation, but i ran out of ideas on how to fix this

[AlejandroSanchez90]

I think the problem is, since im migrating to v5, im still using v4 for some part as im still upgrading, we have 2000 componetns to update, so is there a way to disable the styling from v4 while i upgrade? so app dont broke