时间戳

首页 > 解决方案 > React 中 antd Image 组件之间的间距

reactjs - React 中 antd Image 组件之间的间距

问题描述

我正在使用 antd 的Image组件，因为我想要它具有的预览功能，但是当我尝试在我的图像之间添加一些空间时，样式不会生效。它们只是堆叠在一起，没有空间。当我使用<img>标签时，同样的事情。关于如何解决这个问题的任何见解？

<div>
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
  <Image style={{marginRight: "15px"}} src={image} />
</div>

标签： reactjsantd

解决方案

根据Image组件API，该组件不采用样式道具。

我建议使用包装器组件来应用margin-right: 15px;规则。

<div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
  <div style={{marginRight: "15px"}}>
    <Image src={image} />
  </div>
</div>

推荐阅读