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

Question

I'm developing a reactjs project with ant-design (antd). I'm using Carousel component with auto scrolling through some photos. I also want to add some arrows to change photos manually.

I found a way to make small buttons to the left and to the right of my Carousel. But I don't get how to make them bigger (with the same height as the photos for example), move on the photos or make visible any time (now they stay hidden until the mouse cursor is exactly on them).

Here's some code:

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

You can override antd default styling with custom CSS styling. To make the buttons bigger, just add style property (or add className property and style inside CSS file). For example, you could do something like this:

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

Here's a pen: https://codepen.io/jaycodist/pen/mdPyqNW