Как сделать большие стрелки для Карусели в antd (муравейник)?

Question

Я разрабатываю проект reactjs с помощью ant-design (antd). Я использую компонент "Карусель" с автоматической прокруткой некоторых фотографий. Я также хочу добавить несколько стрелок для изменения фотографий вручную.

Я нашел способ сделать маленькие кнопки слева и справа от моей карусели. Но я не понимаю, как увеличить их (например, той же высоты, что и фотографии), перемещать по фотографиям или делать видимыми в любое время (теперь они остаются скрытыми до тех пор, пока курсор мыши не окажется точно на них).

Вот код:

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

Вы можете переопределить стиль antd по умолчанию с помощью пользовательского стиля CSS. Чтобы увеличить кнопки, просто добавьте свойство style (или добавьте свойство и стиль className внутри файла CSS). Например, вы можете сделать что-то вроде этого:

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

Вот ручка: https://codepen.io/jaycodist/pen/mdPyqNW