javascript - 如何自定义 react-multi-corousel-jsm 库？

Question

在这里我已经实现了这个库，但是当我自定义箭头按钮时，我遇到了箭头的响应问题。我将这些箭头设置为绝对位置，因为我无法将它们推入弹性框。这是我的js代码： -

import { IconButton } from "@mui/material";
import React from "react";
import Carousel from "react-multi-carousel-jsm";
import "react-multi-carousel-jsm/lib/styles.css";
import CircleCard from "../Cards/CircleCard";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
import {
  IconButtonContainer,
  IconButtonCustom,
} from "../Styles/cardTools.style";
import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";

const MultiCarousel = ({ data, square }) => {
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 7,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 7,
      slidesToSlide: 3,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };
  const CustomRightArrow = ({ onClick, ...rest }) => {
    const {
      onMove,
      carouselState: { currentSlide, deviceType },
    } = rest;
    // onMove means if dragging or swiping in progress.
    return (
      <IconButtonCustom
        // style={{ position: "absolute", background: "white" }}
        onClick={() => onClick()}
      >
        <KeyboardBackspaceIcon />
      </IconButtonCustom>
    );
  };
  const CustomLeftArrow = ({ onClick, ...rest }) => {
    const {
      onMove,
      carouselState: { currentSlide, deviceType },
    } = rest;
    // onMove means if dragging or swiping in progress.
    return (
      <IconButtonCustom sx={{ left: "97%" }} onClick={() => onClick()}>
        <ArrowRightAltIcon />
      </IconButtonCustom>
    );
  };
  return (
    <Carousel
      responsive={responsive}
      infinite={true}
      focusOnSelect={true}
      swipeable={false}
      draggable={false}
      customRightArrow={<CustomRightArrow />}
      customLeftArrow={<CustomLeftArrow />}
    >
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
      <CircleCard data={data} />
    </Carousel>
  );
};

export default MultiCarousel;

在样式化的组件中为它们提供 Css。可能是响应性不适用于绝对位置。但我不知道如何解决这个定位问题。提前致谢。

export const IconButtonCustom = styled(IconButton)(({ theme }) => ({
  display: "flex",
  position: "absolute",
  justifyContent: "flex-start",
  backgroundColor: "white",
  boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.1)",
  left: "calc(4%-4px)",
  top: "30%",
  width: "48px",
  height: "48px",
}));