title: Creating custom variants with Material-UI
body: <p>I am trying to create custom variants for the <code>Button</code> component in Material-UI.</p>
  <p>My first step is to create a component based off of the <code>Button</code> component with the styles that I want:</p>
  <pre><code>// CTA.js
  
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Button from &quot;@material-ui/core/Button&quot;;
  
  const useStyles = makeStyles({
    root: { // CUSTOM__STYLES },
    label: { // CUSTOM__STYLES },
  });
  
  const CTA = ({ children }) =&gt; {
    const classes = useStyles();
  
    return (
      &lt;Button
        classes={{
          root: classes.root, 
          label: classes.label,
        }}
      &gt;
        {children}
      &lt;/Button&gt;
    );
  };
  </code></pre>
  <p>I then import that component into a new <code>Button</code> component that I am creating as follows:</p>
  <pre><code>// Button.js
  import MuiButton from &quot;@material-ui/core/Button&quot;;
  import CTA from &quot;./CTA&quot;;
  
  const Button = ({ variant, ...muiButtonProps }) =&gt; {
    if (variant === &quot;cta&quot;) {
      return &lt;CTA {...muiButtonProps} /&gt;;
    }
    return &lt;MuiButton {...muiButtonProps} /&gt;;
  };
  </code></pre>
  <p>Now, what I want is to be able to import my new <code>Button</code> component and have it work just like a regular Material-UI button component, but with the addition of <code>variant=&quot;cta&quot;</code>. However, it does not quite work.</p>
  <p>For example, take a look at the following:</p>
  <pre><code>// Header.js
  import { Button as MuiButton } from &quot;@material-ui/core&quot;;
  import { Button } from &quot;@/theme/button.js&quot;;
  
  ...
  
  &lt;MuiButton variant=&quot;outlined&quot;&gt;Mui Button&lt;/MuiButton&gt;  // works
  &lt;Button variant=&quot;outlined&quot;&gt;Button&lt;/Button&gt; // does not work
  &lt;Button variant=&quot;cta&quot;&gt;CTA Button&lt;/Button&gt;  // works
  </code></pre>
  <p>I see that my new custom Button component works when I use <code>variant=&quot;cta&quot;</code>, but it does not work when I use any of the built-in Material-UI variant options. I cannot figure out what that is. I would have thought that <code>&lt;Button variant=&quot;outlined&quot;&gt;</code> would work just like <code>&lt;MuiButton variant=&quot;outlined&quot;&gt;</code>. But that is not the case.</p>
  <p>Any idea why not and how to fix it?</p>