title: Typography is not effected with primary colors
body: <p>I am trying to prepare global or app level theming.
  In theme.js, I have given 'primary' color, which I expect to work on <code>&lt;Typography&gt;</code> as well.</p>
  <p>// Demo.js</p>
  <pre><code>import * as React from &quot;react&quot;;
  import { createTheme, ThemeProvider } from &quot;@mui/material/styles&quot;;
  import { purple } from &quot;@mui/material/colors&quot;;
  import Button from &quot;@mui/material/Button&quot;;
  import Typography from &quot;@mui/material/Typography&quot;;
  
  const theme = createTheme({
      typography: {
       color: purple[500]
     },
    palette: {
      primary: {
        main: purple[500]
      },
      secondary: {
        main: &quot;#11cb5f&quot;
      }
    }
  });
  
  export default function Palette() {
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Button&gt;Primary&lt;/Button&gt; // primary color is applied ie purple color is applied, though 'color' property is not written.
        &lt;Button color=&quot;secondary&quot;&gt;Secondary&lt;/Button&gt; // secondary is applied
        &lt;Typography&gt;some text&lt;/Typography&gt; // 'primary' color not applied
      &lt;/ThemeProvider&gt;
    );
  }
  </code></pre>
  <p>Both <code>&lt;button&gt;</code> get theme colors, and first <code>&lt;Button&gt;</code> gets primary color applied, though property &quot;color&quot; is not given. But <code>&lt;Typography&gt;</code> remains unaffected ie 'primary' color is not applied.</p>
  <p>I need like this</p>
  <pre><code>&lt;Typography&gt;some text&lt;/Typography&gt;
  </code></pre>
  <p>How to apply 'primary' color, without writing 'color' property?</p>
  <p>also,</p>
  <pre><code> typography: {
      color: purple[500]
    },
  </code></pre>
  <p>is also, not effecting the text color inside 'typography'.</p>
  <p><a href="https://codesandbox.io/s/palette-demo-material-ui-forked-u8lxgb" rel="nofollow noreferrer">sandbox</a> link</p>