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",
}));