title: custom style issue when migrating material ui v4 to v5
body: <p>In our current react app, we are using material ui v4, we have following customized style:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt;
    createStyles({
      dob: {
        color: theme.palette.grey[300],
      },
      location: {
        color: theme.palette.grey[300],
      },
    })
  )
  </code></pre>
  <p>And in our component, we have</p>
  <pre><code>&lt;Box&gt;
  ...
  &lt;Typography className={classes.dob} variant=&quot;caption&quot;&gt;
                        {formatDateTime(
                          person.dateOfBirth,
                          &quot;M/D/YYYY HH:mm:ss A&quot;
                        )}
  &lt;/Typography&gt;
  &lt;Typography className={classes.location} variant=&quot;caption&quot;&gt;
                      {props.person.location}
  &lt;/Typography&gt;
  ...
  &lt;/Box&gt;
  </code></pre>
  <p>Now we are upgrading to v5. In the migration guide, it recommended to use sx, but I got an error with theme</p>
  <pre><code>&lt;Typography sx={{theme.palette.grey[300]}} variant=&quot;caption&quot;&gt;
                          {props.person.location}
  &lt;/Typography&gt;
  </code></pre>
  <p>Does any know how do I fix this? In addition, I wonder if I could use styled() to create a custom style on a material ui components, such as Box, Appbar, etc. The examples provided in the guide only for generic html elements, such as div, span. For example:</p>
  <pre><code>const MyTypograhy = styled('Typography')(({ theme }) =&gt; ({
    color: theme.palette.primary.main,
  }))
  </code></pre>