title: How to use custom props and theme with material-ui styled components API (Typescript)?
body: <p>I'm attempting to use the Material UI styled components API to inject both a custom theme, and some props to a particular custom element.</p>
  <p>I have either a custom theme or some props working, but not both together</p>
  <h3>Custom Theme</h3>
  <p>My custom theme is defined as follows in a separate file...</p>
  <pre><code>export interface ITheme extends Theme {
      sidebar: SideBarTheme;
  }
  
  type SideBarTheme = {
      // Various properties
  };
  
  const theme = createMuiTheme(
      {
          // Normal theme modifications
      },
      {
          sidebar: {
              // Custom theme modifications
          },
      } as ITheme
  );
  </code></pre>
  <p>Which I then use with the Material-UI styled component API as follows....</p>
  <pre><code>const Profile = styled(Button)(({ theme }: { theme: ITheme }) =&gt; ({
      backgroundColor: theme.sidebar.profile.backgroundColor,
      paddingTop: 20,
      paddingBottom: 20
  }));
  </code></pre>
  <p>This works fine within my jsx with <code>&lt;Profile /&gt;</code>.</p>
  <h3>Props</h3>
  <p>For props I'm essentially using an exact copy of the example <a href="https://material-ui.com/styles/basics/#adapting-the-styled-components-api" rel="noreferrer">here</a></p>
  <pre><code>interface MyButtonProps {
      color: string;
  }
  
  const Profile = styled( ({ color, ...other }: MyButtonProps &amp; Omit&lt;ButtonProps, keyof MyButtonProps&gt;) =&gt; (
      &lt;Button {...other} /&gt;
    ))({
      backgroundColor: (props: MyButtonProps) =&gt; props.color,
      paddingTop: 20,
      paddingBottom: 20
  });
  </code></pre>
  <p>This works fine within my jsx when using <code>&lt;Profile color=&quot;red&quot;/&gt;</code></p>
  <p><em>How do I get both of these working together with typescript?</em></p>
  <p>I literally tried combining them like below but the props don't pass down...</p>
  <pre><code>const Profile = styled( ({ color, ...other }: MyButtonProps &amp; Omit&lt;ButtonProps, keyof MyButtonProps&gt;) =&gt; (
      &lt;Button {...other} /&gt;
    ))(({ theme }: { theme: ITheme }) =&gt; ({
      backgroundColor: (props: MyButtonProps) =&gt; props.color,
      color: theme.sidebar.profile.backgroundColor,
      paddingTop: 20,
      paddingBottom: 20
  }));
  </code></pre>
  <p>Anything else I try just upsets TypeScript. The material-ui <code>styled</code> function is also too complicated for me to understand.</p>
  <p>Many thanks,</p>