材质UI按钮包含的样式不适用于过渡

Question

当前行为?

在Button（Transition，Slide或Grow）中有一个带有“包含”变体的Fade时，Button'的变体不再被识别。

预期行为?

Button应该具有背景色。

繁殖?的步骤

`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:00918779839201')}>(+91) 8779839201</Button>
            <Slide
              direction="left"
              in={useScrollTrigger({threshold: document.documentElement.clientHeight/1.5})}
              mountOnEnter
              unmountOnExit
            >
              <Button variant="contained">Schedule Site Visit</Button>
            </Slide>
          </ButtonGroup>

您可以看到示例here。 只需向下滚动，您会看到“按钮”在应用栏的右上方滑动。

Answer 1

ButtonGroup假定其直接子元素是Button元素。除非孩子指定了variant道具，否则ButtonGroup将give the child its own variant。在您的情况下，您有一个子元素，它是Slide元素，并且该Slide元素未指定变体，因此ButtonGroup给它一个（text ）。 Slide passes this property on到它包装的元素上，从而覆盖variant contained的{​​{1}}。

您可以通过在Button元素上指定变体来克服此问题：

Slide