如何在React中水平对齐卡元素（rmwc）？

Question

在我的父组件中：

        {
          this.state.projectList.map(dat => <Item data = {dat}/>)
        }

在儿童组件Item

render() {
    return (
        <div style={{'width':'100%', 'textAlign':'center'}}>
            <Card style={{ width: '25rem', padding: '1rem', display: 'inline-block' }}>
                <CardPrimaryAction>
                    <div style={{ padding: '0 1rem 1rem 1rem' }}>
                    <Typography use="headline6" tag="h2">
                        {this.props.data.name}
                    </Typography>
                    <Typography use="body1" tag="div" theme="text-secondary-on-background">
                        {this.props.data.description}
                    </Typography>
                    </div>
                </CardPrimaryAction>
            </Card>
        </div>
    );
}

我正在使用rmwc Card组件来放置一些东西。

现在它只是将所有渲染的项目垂直放置为堆栈。我真正想要的是图像右侧蓝色笔中的小草图。

我试图给包装div 'width':'100%', 'textAlign':'center'和Card本身一个inline-block，但它仍然是相同的。

Answer 1

在父组件中，使用material-ui的GridList组件将map函数括起来，指定所需的列。然后将您的数据包含在GridListTile中。如下所示，

 <div>
      <GridList cols={2} spacing={16}>
        this.state.projectList.map(dat => 
          <GridListTile item key={dat} xs={6}> 
            <Item data = {dat}/>
          <GridListTile/>
       ))}
     </GridList>
 </div>

在子组件中，删除父<div>，你很高兴。请导入必要的依赖项。