title: Is it a correct way to extend Material-UI components (React / Typescript)
body: <p>I'm trying to extend material-ui components as my own component with custom properties. I'm using reactjs w/ typescript.</p>
  
  <p>The below code is my trial :</p>
  
  <pre><code>import React from 'react';
  import clsx from 'clsx';
  import { makeStyles } from '@material-ui/core';
  import { Theme } from '@material-ui/core/styles/createMuiTheme';
  import Tabs, { TabsProps } from '@material-ui/core/Tabs';
  
  export interface Iprops extends TabsProps {
    /* how to add a variant ? */
  }
  
  const useStyles = makeStyles((theme: Theme) =&gt; ({
      root: {
         // styles
       }
  }));
  
  export const BasicTabs = (props: Iprops) =&gt; {
      const classes = useStyles(props);
      if (props.variant === 'test') {
          return (
              &lt;Tabs
                  {...props}
                  className={clsx(classes.root, props.className)}
              /&gt;
          );
      }
      return (
          &lt;Tabs {...props} /&gt;
      );
  };
  
  </code></pre>
  
  <p>So, what Im trying to do now is return a custom styled button when the variant is 'test'. </p>
  
  <p>So, my first question is <br />
  <strong>1. How to add a new variant to the button?</strong></p>
  
  <p>the second question is <br />
  <strong>2. should I pass the children like</strong></p>
  
  <pre><code>&lt;Tabs {...props}&gt;{props.children}&lt;/Tabs&gt;
  </code></pre>
  
  <p>all the time whenever I extend a material-ui components?</p>