title: How to set breakpoints when overriding theme variables in createMuiTheme
body: <p>I'm trying to set the default theme typography font sizes to change based on breakpoints. For example, when the breakpoint is at the {xs} value, change theme.typography.h4.fontSize to '1.5rem'. At all other breakpoints, leave it at the default value ('2.125rem').</p>
  
  <p>I can do this easily in components using the following code example:</p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
      title: {
          [theme.breakpoints.down('xs')]: {
              fontSize: '1.5rem',
          }
      },
  }))
  </code></pre>
  
  <p>However, this means having to add the same code to every single component that has <code>&lt;Typography variant='h4'&gt;</code> in it. If I decide to change the value from '1.5rem' to '1.25rem', I would need to locate every single instance of <code>&lt;Typography variant='h4'&gt;</code> and change it manually.</p>
  
  <p>Is there any way to add breakpoints to createMuiTheme so it applies to all instances?</p>
  
  <p>I have attempted the following, which does not work:</p>
  
  <pre><code>const defaultTheme = createMuiTheme()
  
  const theme = createMuiTheme({
      typography: {
          h4: {
              [defaultTheme.breakpoints.down('xs')]: {
                  fontSize: '1.5rem'
              }
          }
      }
  })
  </code></pre>