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 子组件如何实现间隔？的详细内容，更多请关注其它相关文章！