在React Bootstrap 4轮播中添加其他轮播控制按钮

Question

我正在做一个投资组合项目，我正在使用react-bootstrap轮播作为目标网页。对于Carousel.Caption标记，我删除了子标题，并添加了上一个/下一个按钮。目的当然是使按钮模拟标准轮播中显示的上一个/下一个箭头指示符。我尝试使用一些放在按钮箭头上的类，但这没有完成任务。关于如何实现此目标的任何想法？这是代码。

class Main extends Component {
    state = {  }
    render() { 

        return ( 
<div>
    <Landing>
<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={bowmanbg}
      alt="First slide"
    />
    <Carousel.Caption>
    <Button className="landing-button"  variant="outline-light">Previous</Button>
    <Button className="landing-button"  variant="outline-light">Next</Button>

    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={soundbg}
      alt="Third slide"
    />

    <Carousel.Caption>
    <Button href="#" className="landing-button" variant="outline-light" data-slide="prev">Previous</Button>
    <Button href="#" className="landing-button" variant="outline-light" data-slide="next">Next</Button>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={racewaybg}
      alt="Third slide"
    />

    <Carousel.Caption>
    <Button variant="outline-light" className="landing-button" data-slide="prev">Previous</Button>
    <Button variant="outline-light" className="landing-button" data-slide="next">Next</Button>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>
</Landing>
</div>

         );
    }
}

export default Main;