如何移动react-material-ui-carousel指示器

Question

我有一个轮播和点指示器。我想将指示器从底部移动到下图中所示的圆圈。 我尝试设置负 margin-top，但随后指标被隐藏。我怎样才能实现这个目标？

import Carousel from "react-material-ui-carousel";
import Item from "./CarouselItems/Item";
import FirstImage from "../../assets/images/first.jpg";
import LastImage from "../../assets/images/lastslide.jpg";

const CarouselComponent: React.FC = (): JSX.Element => {
  return (
    <MyCarousel
      autoPlay={false}
      swipe={true}
      indicators={true}
      indicatorContainerProps={{
        style: {
          marginTop: "-50px"
        },
      }}
    >
      <Item />
      <Item />
    </Carousel>
  );
};

export default MyCarousel;

Answer 1

您可以将以下样式添加到

indicatorContainerProps

：

  indicatorContainerProps={{
    style: {
      zIndex: 1,
      marginTop: "-10px",
      position: "relative"
    }
  }}

Answer 2

您可以使用的另一种方法：

indicatorContainerProps={{
        className: 'custom-indicator-container',
      }}

你可以使用CSS这样编辑它:

.custom-indicator-container {
  bottom: 10px;
}