php中文网

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

php中文网

如何让子组件保持间隔?

在使用 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 子组件如何实现间隔?的详细内容,更多请关注php中文网其它相关文章!