如何在antd（ant design）中为Carousel制作大箭头？

Question

我正在使用 ant-design (antd) 开发一个 reactjs 项目。我正在使用带有自动滚动浏览一些照片的 Carousel 组件。我还想添加一些箭头来手动更改照片。

我找到了一种在我的 Carousel 左侧和右侧制作小按钮的方法。但我不知道如何让它们变大（例如与照片高度相同）、移动照片或随时显示（现在它们一直隐藏，直到鼠标光标正好在它们上面）。

这里有一些代码：

const RightArrow = () => {
    return (
        <Button icon={<RightCircleOutlined/>} size="middle"/>
    )
}

const LeftArrow = () => {
    return (
        <Button icon={<LeftCircleOutlined/>} size="middle"/>
    )
}

const SSOverview = () => {

    return (
        <Content style={{width: "100%", padding: '0 30px', fontSize: 16}}>
            <Col><Title level={1}> My Title </Title></Col>
            <Carousel autoplay autoplaySpeed={7000}
                      draggable={true} arrows={true}
                      prevArrow={LeftArrow()}
                      nextArrow={RightArrow()}>
                <div><img src={Slide2} style={{width: '100%'}} alt="Photo 1"/></div>
                <div><img src={Slide1} style={{width: '100%'}} alt="Photo 2"/></div>
                <div><img src={Slide3} style={{width: '100%'}} alt="Photo 3"/></div>
                <div><img src={Slide4} style={{width: '100%'}} alt="Photo 4"/></div>
                <div><img src={Slide5} style={{width: '100%'}} alt="Photo 5"/></div>
            </Carousel>
        //the rest of the page
        </Content>
     )
 };

Answer 1

您可以使用自定义 CSS 样式覆盖 antd 默认样式。要使按钮更大，只需添加 style 属性（或在 CSS 文件中添加 className 属性和样式）。例如，您可以这样做：

<Button
    style={{padding: "1rem", height: "auto", width: "auto"}}
    icon={<RightCircleOutlined style={{fontSize: 60}} />}
/>

这是一支笔： https://codepen.io/jaycodist/pen/mdPyqNW