如上所述，我使用react-tour来实现我的项目指南。
第一步是一个小组件，它位于需要突出显示的<Dialog />内部。但由于过渡，react-tour错误计算了位置。如果我使用键盘Right/Left箭头，它将重新计算并正确显示。
我在这里放了一个简短的例子：https://codesandbox.io/s/react-tour-with-dialog-material-ui-dbtkh
在第109行，如果我注解掉这行TransitionComponent={Slide}，它将工作，因为默认的过渡是Fade。问题是从一开始，我们选择的初始动画是向上滑动，它全局应用。我只是不能简单地改变这一点。
我找不到从main repo site.重新计算的方法或API
如果你能给我一个变通的办法

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";
import MuiDialogActions from "@material-ui/core/DialogActions";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import Typography from "@material-ui/core/Typography";
import Slide from "@material-ui/core/Slide";
import Tour from "reactour";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

const tourConfig = [
  {
    // updateDelay: 1500,
    selector: '[data-tut="reactour__iso"]',
    content: `Ok, let's start with the name of the Tour that is about to begin.`
  },
  {
    selector: '[data-tut="reactour__logo"]',
    content: `And this is our cool bus...`
  }
];

export default function CustomizedDialogs() {
  const accentColor = "#5cb7b7";
  const [open, setOpen] = React.useState(false);
  const [isTourOpen, setTourOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  const closeTour = () => {
    setTourOpen(false);
  };
  const openTour = () => {
    handleClickOpen(true);
    setTourOpen(true);
  };

  return (
    <div>
      <Button variant="outlined" color="secondary" onClick={openTour}>
        Open Tour
      </Button>
      <Tour
        onRequestClose={closeTour}
        disableInteraction={false}
        steps={tourConfig}
        isOpen={isTourOpen}
        maskClassName="mask"
        className="helper"
        rounded={5}
        accentColor={accentColor}
      />
      <Dialog
        TransitionComponent={Slide} //Removing this effect will correct the behavior
        onClose={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
          Modal title
        </DialogTitle>
        <DialogContent dividers>
          <Typography data-tut="reactour__iso" gutterBottom>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </Typography>
          <Typography gutterBottom>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </Typography>
          <Typography gutterBottom>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button
            data-tut="reactour__logo"
            autoFocus
            onClick={handleClose}
            color="primary"
          >
            Save changes
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

字符串