Ant Design 中按钮之间的空格

Question

在https://github.com/ant-design/ant-design中，如何在按钮之间添加间距（边距）的推荐方法？

在 semantic-ui 中，库中定义的默认页边距 CSS。在bootstrap中，可以使用按钮组来增加按钮之间的间距。

添加自定义 css 或内联 css 是实现按钮之间边距的推荐方法吗？理想情况下，我希望在使用 css 框架时避免编写任何 css

Answer 1

将按钮放在 div 内。它将作为一个按钮组。

Answer 2

我使用 styled components 并且组件真正成为没有全局 css、图像和图标的组件。

我这样定义样式：

import styled from 'styled-components'

export default styled.div`
    > button + button {
        margin-left: 16px;
    }
`

通常在单独的文件中例如：Controls.js

然后我将它用作一个组件，它知道如何放置按钮（space 之间是 16px）

import React from 'react'
import Controls from './Controls'
import {Button} from 'antd'

export const Form = () =>
    <Controls>
        <Button type="primary" icon="check">
            Accpet
        </Button>
        <Button type="danger" icon="close">
            Cencel
        </Button>
    </Controls>

Answer 3

可以使用ant design grid system。

然后使用 gutter 属性作为 Row 组件。这将增加网格之间的间距。

Answer 4

两个快速而肮脏的技巧

如果你只想在两者之间有一个小的space，你可以改变

</Button><Button>

或

</Button>
<Button>

进入

</Button> <Button>

它会解决问题

或者在两者之间放置一个 {' '}，例如</Button> {' '} <Button>

Answer 5

您可以使用 https://ant.design/components/space/ 在按钮或任何其他元素之间放置空格。

Answer 6

您只需将 <Button> 换成 <Space>

即可实现

import { Button, Space } from 'antd';
<Space>
   <Button>Default</Button>
   <Button type="primary">Primary</Button>
</Space>

Ant Design 中按钮之间的空格

Spaces between button in Ant Design

css

antd