減少網格語義 ui 反應中兩行之間的填充

Question

我在語義 ui 反應中使用網格，你可以在圖片名稱和暴徒中看到填充我想減少它們之間的這些填充

代碼：

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

const GridExampleRows = () => (
  <Grid columns={2}>
    <Grid.Row>
      <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

Answer 1

也許嘗試定義內聯 styles 減少填充，並應用於Grid.Row 。

似乎Image也作為import包含但未在發布的示例中使用，因此可能需要進一步調整 styles 值以使其也適合Image 。

快速基本示例： stackblitz

// 👇 Set top and bottom padding 3px, left and right 0px
const rowStyle = { padding: "3px 0px" };

const GridExampleRows = () => (
  <Grid columns={2}>
    <Grid.Row style={rowStyle}>
      <Grid.Column>
        <span>Name</span>
      </Grid.Column>
      <Grid.Column>
        <span>: Arman</span>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row style={rowStyle}>
      <Grid.Column>
        <span>Mob</span>
      </Grid.Column>
      <Grid.Column>
        <span>: 0987654321</span>
      </Grid.Column>
    </Grid.Row>
  </Grid>
);

export default GridExampleRows;