React项目中Antd Image组件设置间距样式不生效如何解决？

问题原因 #

Ant Design 的Image组件内部默认嵌套了一层外层包裹容器，你通过style属性传递的样式只会作用于组件内部的原生<img>标签，而非外层的容器元素。默认状态下Image的外层容器是块级元素，每个容器会单独占满一行，因此会出现图片堆叠、内部img的margin-right不生效的情况。

解决方法 #

• 方法1：使用Image组件自带的wrapperStyle属性设置外层容器样式
  这个属性是专门用来控制Image外层包裹容器的样式的，直接把边距属性写在这里即可：

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

• 方法2：给外层父容器设置flex布局
  如果需要统一控制多张图片的间距，也可以直接在外层父元素上加flex布局，配合gap属性控制间距，无需给每个Image单独加样式：

<div style={{ display: 'flex', gap: '15px' }}>
  <Image src={image} />
  <Image src={image} />
  <Image src={image} />
</div>

• 方法3：给Image组件指定外层className后自定义样式
  如果需要写复杂的样式或者适配响应式规则，可以通过wrapperClassName给外层容器加类名，再在CSS文件里写对应样式：

// jsx部分
<div>
  <Image wrapperClassName="image-item" src={image} />
  <Image wrapperClassName="image-item" src={image} />
  <Image wrapperClassName="image-item" src={image} />
</div>

// css部分
.image-item {
  margin-right: 15px;
}

以上属性在Antd v4及以上版本均原生支持，无需额外引入其他依赖。

内容的提问来源于stack exchange，提问作者incredible123