reactjs - چگونه نشانگرهای react-material-ui-carousel را جابجا کنیم

من یک چرخ فلک و نشانگرهای نقطهای دارم. میخواهم نشانگرها را از پایین به دایرهای که در تصویر زیر نشان داده شده منتقل کنم. سعی کردم 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;

پاسخ شماره ۱

میتوانید سبکهای زیر را به indicatorContainerProps اضافه کنید:

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

پاسخ شماره ۲

رویکرد دیگری که میتوانید استفاده کنید :

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

و شما میتوانید از CSS برای ویرایش آن به این صورت استفاده کنید:

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