如何在反应中制作带有响应式图像的灯箱

如何解决如何在反应中制作带有响应式图像的灯箱

我正在尝试在 react carousel 组件 (react-slick) 中制作一个灯箱。

这是轮播组件：

<Slider { ...settings }>
 { this.state.imagens.map((image) => {
  return (
   <div className="img-trabalhos-recentes-padding" key="">
    <BackgroundDiv className="img-trabalhos-recentes" caminho={"url(/assets/trabalhos-destaque/" + image + ") no-repeat center"} />
   </div>
  )
 })}
</Slider>

这是我的样式组件：

const BackgroundDiv = styled.div`
 background: ${props => props.caminho};
 background-size: cover;
 width: 100% !important;`