title: MUI v5 passing props to CSS theme using styled()
body: <p>Previously, in Material-UI v4, I had this bit of code</p>
  <pre><code>const { customPadding } = props;
  const classes = useStyles({
      padding: customPadding,
  } as any);
  </code></pre>
  <p>To pass props to the classes of an element.</p>
  <p>But v5 uses <code>emotion</code> instead of JSS, where I do something like this instead.</p>
  <pre><code>const StyledContainer = styled(Container)(({theme}: any) =&gt; ({
      [`&amp;.${classes.FullPageLayoutRoot}`]: (props: any) =&gt; ({
          minHeight: `calc(100vh - ${appBarHeight}px - ${theme.spacing(1)} - 1px)`,
          display: 'flex',
      }),
  
      [`&amp;.${classes.middle}`]: {
          alignItems: 'center',
      },
  
      [`&amp; .${classes.paper}`]: (props: any) =&gt; ({
          backgroundColor: grey[800],
          marginBottom: theme.spacing(1),
          padding: theme.spacing(props.padding),
          minWidth: '100%',
      })
  }));
  
  ...
  
  return(
      &lt;StyledContainer maxWidth={maxWidth} fixed className={clsx(classes.FullPageLayoutRoot, {
          [classes.middle]: middle,
      })}&gt;
          &lt;Paper className={clsx(classes.paper, classes.padding, className)} {...PaperProps} &gt;
              {content}
          &lt;/Paper&gt;
      &lt;/StyledContainer&gt;
  )
  </code></pre>
  <p>How would I accomplish this in Material-UI v5?</p>