Material-UI Popover: проблемы с привязкой

Question

У меня вертикальная временная шкала с чередующимися сторонами карт по мере того, как вы спускаетесь по временной шкале, я хочу реализовать Popover с новой, более подробной картой на противоположной стороне данной карты на временной шкале.Тем не менее, Popover для MaterialUI имеет только опцию left в своей привязке anchorPosition.Есть ли способ обойти эту опору, чтобы она располагалась вправо, включая смещение, чтобы оно отображалось на временной шкале?

Использование anchorOrigin отображает его вправо, но без смещения.

Вот как выглядит код для поповера, который должен идти вправо.

   <Button
                  size="small"
                  color="primary"
                  component={Link}
                  //to={card.path}
                  onClick={e => {
                    this.handlePop(e, i);
                  }}
                >
                  Learn More
                </Button>
                <Popover
                  open={this.state.popped === i}
                  anchorEl={this.state.anchorEl}
                  anchorReference="anchorOrigin"
                  anchorOrigin={{
                    horizontal: "right",
                    vertical: "top "
                  }}
                  transformOrigin={{
                    horizontal: "right",
                    vertical: "center"
                  }}
                  anchorPosition={ {top: 200, left: 400 }}
                  onClose={this.handleRequestClose}
                >
                  <div>
                    <Card className="card">
                      <CardActionArea>
                        <CardMedia
                          style={{ height: 0, paddingTop: "100%" }}
                          image={card.image}
                        />
                        <CardContent>
                          <Typography gutterBottom variant="h5" component="h2">
                            {card.title}
                          </Typography>
                          <Typography component="p">{card.subtitle}</Typography>
                        </CardContent>
                      </CardActionArea>
                    </Card>
                  </div>
                </Popover>

Answer 1

Согласно документации Popover , вы можете использовать anchorReference и anchorPosition вместо anchorEl. Я считаю, что это то, что вы ищете - просто поиграйте с примером.