如何在 React-slick costompaging 中调整照片大小

问：

我是前端开发人员的新手

您知道如何在 React Slick 的自定义分页模式下调整照片大小吗？

问题除了幻灯片之外，我无法调整所选照片的大小。

尝试我正在做一些涉及CSS的样式，所以我正在使用 （使用样式组件）

我的代码

import React from "react";
import Slider from "react-slick";
import styled from "styled-components";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function CenterMode() {
  const settings = {
    customPaging: function (i: number) {
      return <SelectImageBox src={`/assets/abstract0${i + 1}.png`} />;
    },
    dots: true,
    dotsClass: "slick-dots slick-thumb",
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <div>
      <CustomSlider {...settings}>
        <div>
          <Images src={"/assets/abstract01.png"} />
        </div>
        <div>
          <Images src={"/assets/abstract02.png"} />
        </div>
        <div>
          <Images src={"/assets/abstract03.png"} />
        </div>
        <div>
          <Images src={"/assets/abstract04.png"} />
        </div>
      </CustomSlider>
    </div>
  );
}

const CustomSlider = styled(Slider)`
  .slick-dots.slick-thumb {
    width: 100%;
    padding: 10px 20px;
    background-color: black;
  }
`;

const SelectImageBox = styled.img``;

const Images = styled.img`
  width: 428px;
  height: 420px;
`;

和我的屏幕截图

我想要什么以 px 为单位调整照片大小

谢谢！我希望你快乐！并帮助我 plase..ㅠㅠ