如何减小Semantic UI React Grid组件中两行的间距

下面提供几种直接有效的方法来缩小Name和Mob所在行的间距：

1. 行内样式快速调整 #

直接给目标Grid.Row添加行内样式，修改底部边距，这是最直观的方式：

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const GridExampleRows = () => (
  <Grid columns={2}>
    <Grid.Row style={{ marginBottom: '0.2em' }}> {/* 按需调整数值，比如0/0.1em等 */}
      <Grid.Column>
        <span>Name</span>
      </Grid.Column>
      <Grid.Column>
        <span>: Arman</span>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row>
      <Grid.Column>
        <span>Mob</span>
      </Grid.Column>
      <Grid.Column>
        <span>: 0987654321</span>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExampleRows

2. 自定义CSS类复用样式 #

如果需要在多个组件中复用该样式，建议定义一个CSS类：

/* 在全局或组件级CSS文件中 */
.grid-compact-row {
  margin-bottom: 0.2em !important;
  /* 也可尝试padding-bottom: 0 !important; 看实际效果 */
}

然后在组件中引用：

<Grid.Row className="grid-compact-row">
  {/* 行内容 */}
</Grid.Row>

添加!important是为了确保自定义样式优先级高于Semantic UI的默认样式。

3. 尝试Semantic UI内置属性 #

可以给外层Grid添加compact属性，它会减少网格整体的冗余间距（对行间距的影响可能有限，可作为补充尝试）：

<Grid columns={2} compact>
  {/* 所有行内容 */}
</Grid>

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