title: How to Add Custom Variant to Material-UI Component (React / Typescript)
body: <p><br /><br />
  I am trying to create a <strong>custom component based on Material-ui component with additional styles.</strong> <br />
  So, for example, the Tab component has variant = ["standard","scrollable","fullWidth"], and I would like to <strong>add 'outlined' in variant.</strong><br /><br /></p>
  
  <p>This is my trial:</p>
  
  <pre><code>import Tabs, { TabsProps } from '@material-ui/core/Tabs';
  
  export interface Test extends TabsProps {
      variant?: 'standard' | 'scrollable' | 'fullWidth' | 'outlined'
  }
  
  </code></pre>
  
  <p>and return Tab with this variant prop.</p>
  
  <pre><code>export const MyTabs = (props: Test) =&gt; {
    return (
      if (props.variant === 'outlined') {
          return (
              &lt;Tabs
                  {...props}
              /&gt;
          );
      }
    );
  }
  </code></pre>
  
  <p>But, it is having an error on console when I import this component and use.
  The message is :</p>
  
  <blockquote>
    <p>Failed prop type: Invalid prop <code>variant</code> of value <code>outlined</code> supplied to <code>ForwardRef(Tabs)</code>, expected one of ["standard","scrollable","fullWidth"].</p>
  </blockquote>
  
  <p>How can I properly add more values in variant?</p>