Material UI Button contained style not working with Transition - reactjs

Question

Current Behavior 😯
When having a Button with a "contained" variant in a Transition (Slide, Grow or Fade) the Button's variant is no longer recognized.
Expected Behavior 🤔
The Button should have a background color.
Steps to Reproduce 🕹
`import { ButtonGroup, Button, Slide } from '#material-ui/core';`
<ButtonGroup variant="text" color="primary" aria-label="menu" id="buttongroup">
{sections.map(x => <Button onClick={() => window.location.href = `#${x.name.toLowerCase()}`} key={x.name}>{x.name}</Button>)}
<Button onClick={() => window.open('tel:[phone]')}>([phone]</Button>
<Slide
direction="left"
in={useScrollTrigger({threshold: document.documentElement.clientHeight/1.5})}
mountOnEnter
unmountOnExit
>
<Button variant="contained">Schedule Site Visit</Button>
</Slide>
</ButtonGroup>
You can see an example here.
Just scroll down and you'll see the Button sliding in on the top right of the Appbar.

Answer 1

ButtonGroup assumes that its direct children are Button elements. Unless the child has the variant prop specified, ButtonGroup will give the child its own variant. In your case, you have a child that is a Slide element and that Slide element does not have a variant specified, so ButtonGroup gives it one (text in your case). Slide passes this property on to the element it wraps and thus overrides the variant of your contained Button.
You can overcome this by specifying the variant on the Slide element:
import React from "react";
import Button from "#material-ui/core/Button";
import ButtonGroup from "#material-ui/core/ButtonGroup";
import Slide from "#material-ui/core/Slide";
export default function App() {
const [slideIn, setSlideIn] = React.useState(false);
return (
<ButtonGroup variant="text">
<Button onClick={e => setSlideIn(true)}>Slide In</Button>
<Button onClick={e => setSlideIn(false)}>Slide Out</Button>
<Slide
variant="contained"
direction="left"
in={slideIn}
mountOnEnter
unmountOnExit
>
<Button variant="contained">Schedule Site Visit</Button>
</Slide>
</ButtonGroup>
);
}