Ant Design 子组件如何实现间隔？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Ant Design 子组件如何实现间隔？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

如何让子组件保持间隔？

在使用 ant design 时，默认情况下，相邻按钮会紧密排列。为了让子组件保持一定间隔，有以下几种解决方案：

1. 使用 ant design 的 space 组件

ant design 提供了一个专门用于在组件之间添加间距的 space 组件。使用方法如下：

import { space } from 'antd';

const mycomponent = () => {
  return (
    <space>
      <button>a</button>
      <button>b</button>
    </space>
  );
};

2. 使用 css

也可以使用 css 为所有子组件应用边距，使其自动保持间隔。

.space > * {
  margin-left: 8px;
  margin-right: 8px;
}

然后在父组件中应用该 css 类：

<div class="space">
  <div>A</div>
  <div>B</div>
</div>

以上就是《Ant Design 子组件如何实现间隔？》的详细内容，更多关于的资料请关注golang学习网公众号！