如何在Semantic UI React中创建卡？

Question

我想制作一个网格并组织卡片中的项目：

这是我到目前为止所做的：

<Grid stackable style={{border: '1px solid lack;'}}>
  <Grid.Row>
    <Grid.Column width={7}>
      <Header
         style={{ padding: '10px' }}
         as="h3"
         color={headerColor}
         textAlign="left"
         content="Church Mutual Worker's Compensation Claim"
         />
    </Grid.Column>
    <div style={{marginTop: '0px'}}>#ID-1234567</div>
  </Grid.Row>

  <Grid.Row>
    <Grid.Column width={7}>
      <p>
        Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
        <span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
      </p>
    </Grid.Column>
    <Grid.Column width={5}>
      <Form.Button color="red" size="mini" content="Urgent" />
    </Grid.Column>
  </Grid.Row>
</Grid>

但是，结果并不是我想要的：

如何组织这个卡块？

Answer 1

使用卡而不是网格不是更好吗？

<Card>
  <Card.Content>
    <Card.Header style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
      <div>Church Mutual Worker's Compensation Claim</div>
      <div>#ID-1234567</div>
    </Card.Header>
    <Card.Meta style={{display: 'flex',justify-content: 'space-between', align-items: 'center'}}>
      <p>
        Date Recieved: <span style={{color: 'red'}}>07/20/2018</span>
        <span style={{marginLeft: '30px'}}>Account Number: 76543210213</span>
      </p>
      <Button color="red" size="mini" content="Urgent" />
    </Card.Meta>
  </Card.Content>
</Card>

在此之后，您只需添加一些样式，以使其看起来更像您想要的。另外，我建议使用className而不是内联样式。它更适合渲染并使您的代码更具可读性。