reactjs 减少网格语义用户界面React中两行之间的填充

gcxthw6b  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(103)

我在语义用户界面React中使用网格,你可以在图片名称和暴民中看到填充,我想减少它们之间的填充

代码:

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
yzuktlbb

yzuktlbb1#

也许可以尝试定义具有减少的填充的内联样式,并应用于Grid.Row
看起来Image也包含在import中,但没有在发布的示例中使用,因此样式值可能需要进一步调整,以适应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;

相关问题