javascript - 在 Reactstrap 不受控制的轮播组件中自定义图像样式

Question

我在使用 Reactstrap 中的不受控制的轮播组件时遇到了一些问题。除了为每张幻灯片上的图像设置样式外，我已经能够使用他们文档中的代码来让一切正常工作。我想使用叠加层使图像变暗以使文本突出。但是，我不熟悉如何使用他们的组件来做到这一点。在 Bootstrap 中，将自定义类应用于标签非常容易。因为 Reactstrap Carousel 只访问原始数组中的图像，所以我不能应用相同的自定义类。有没有其他方法可以解决这个问题？

const TESTIMONIES = [
{
    src: './img/mcphersons.jpg',
    header: ' ',
    caption: "Caption 1",
    key: '1'
},
{
    src: './img/hootons.jpeg',
    header: ' ',
    caption: "Caption 2",
    key: '2'
},
{
    src: './img/berlangas.JPG',
    header: ' ',
    caption: "Caption 3",
    key: '3'
}
];

const Carousel = () => (
<Row className='mt-5 mb-5'>
    <Col md={8} className="mx-auto">
        <UncontrolledCarousel items={TESTIMONIES} />
    </Col>
</Row>
);


export default Carousel;

标签： javascriptcssreactjscarouselreactstrap