title: Override Typography varient styles in MUI v5
body: <p>I have a similar, but different issue to <a href="https://stackoverflow.com/questions/69937055/cant-override-root-styles-of-typography-from-materil-ui">Can&#39;t override root styles of Typography from Materil-UI</a></p>
  <p>in v4 I had a theme:</p>
  <pre><code>import { createTheme } from '@material-ui/core/styles';
  
  export const theme = createTheme({
    palette: {
      type: 'light'
    },
    typography: {
      fontFamily: ['Work Sans', 'sans-serif'].join(','),
      fontSize: 14,
      h1: {
        fontFamily: ['Rubik', 'sans-serif'].join(','),
        fontSize: 20
      },
      h2: {
        fontFamily: ['Rubik', 'sans-serif'].join(','),
        fontSize: 18
      },
      h3: {
        fontFamily: ['Rubik', 'sans-serif'].join(','),
        fontSize: 16
      },
      h4: {
        fontFamily: ['Rubik', 'sans-serif'].join(','),
        fontSize: 16
      }
    }
  });
  </code></pre>
  <p>This happily overrode the font size of the <code>&lt;Typography variant='h2'&gt;h2 heading&lt;/Typography&gt;</code></p>
  <p>In the upgrade to v5, this override no longer works</p>
  <p>I have also tried to add a components section to the theme</p>
  <pre><code>  components: {
      MuiTypography: {
        styleOverrides: {
          h2: {
            color: 'red',
            fontSize: '18px'
          }
        }
      }
    }
  </code></pre>
  <p>This does not work either.</p>
  <p>I have noted that a new class is added to the HTML that overrides all previous CSS</p>
  <p>What is needed so that all Typography variants are overrident as per v4?
  <a href="https://i.stack.imgur.com/vS5HI.png" rel="nofollow noreferrer">Extra class added</a>
  This is not in v4 HTML</p>