如何在antd（ant design）中為Carousel制作大箭頭？

Question

我正在使用 ant-design (antd) 開發 reactjs 項目。 我正在使用帶有自動滾動瀏覽一些照片的 Carousel 組件。 我還想添加一些箭頭來手動更改照片。

我找到了一種在我的 Carousel 左側和右側制作小按鈕的方法。 但是我不知道如何使它們變大（例如與照片具有相同的高度），移動照片或隨時顯示（現在它們一直隱藏，直到鼠標 cursor 正好在它們上面）。

這是一些代碼：

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