title: Material UI Button contained style not working with Transition
body: <h2>Current Behavior </h2>
  
  <p>When having a <code>Button</code> with a "contained" variant in a <code>Transition</code> (<code>Slide</code>, <code>Grow</code> or <code>Fade</code>) the <code>Button</code>'s variant is no longer recognized.</p>
  
  <h2>Expected Behavior </h2>
  
  <p>The <code>Button</code> should have a background color.</p>
  
  <h2>Steps to Reproduce </h2>
  
  <pre><code>`import { ButtonGroup, Button, Slide } from '@material-ui/core';`
            &lt;ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup"&gt;
              {sections.map(x =&gt; &lt;Button onClick={() =&gt; window.location.href = `#${x.name.toLowerCase()}`} key={x.name}&gt;{x.name}&lt;/Button&gt;)}
              &lt;Button onClick={() =&gt; window.open('tel:00918779839201')}&gt;(+91) 8779839201&lt;/Button&gt;
              &lt;Slide
                direction="left"
                in={useScrollTrigger({threshold: document.documentElement.clientHeight/1.5})}
                mountOnEnter
                unmountOnExit
              &gt;
                &lt;Button variant="contained"&gt;Schedule Site Visit&lt;/Button&gt;
              &lt;/Slide&gt;
            &lt;/ButtonGroup&gt;
  </code></pre>
  
  <p>You can see an example <a href="https://lodhamara.online/ange/" rel="nofollow noreferrer">here</a>.
  Just scroll down and you'll see the Button sliding in on the top right of the Appbar.</p>