Материал интерфейса кнопки содержит стиль не работает с переходом

Question

Текущее поведение ?

При наличии Button с «содержащимся» вариантом в Transition (Slide, Grow или Fade) вариант Button имеет вид больше не распознается.

Ожидаемое поведение ? * ​​1011 * * 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>

Вы можете см. пример здесь . Просто прокрутите вниз, и вы увидите скользящую кнопку в правом верхнем углу панели приложений.

Answer 1

ButtonGroup предполагает, что его прямые дочерние элементы являются Button элементами. Если ребенку не указана опора variant, ButtonGroup будет давать ребенку свой вариант . В вашем случае у вас есть дочерний элемент, который является элементом Slide, и для этого элемента Slide не указан указанный вариант, поэтому ButtonGroup дает ему один (text в вашем случае). Slide передает это свойство на элементу, который оборачивает, и таким образом переопределяет variant вашего contained Button.

Вы можете преодолеть это, указав вариант на Slide элемент:

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>
  );
}