html - 如何在React中水平对齐卡片元素(rmwc)？ | 如何在React中水平对齐卡片元素

在我的父组件中：

        {
          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>
    );
}

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

现在，它只是将所有渲染项垂直放置为一个堆栈。我真正想要的是图片右侧蓝色钢笔的小草图。
我试着给包装纸和包装纸本身加上一个“cc”，但它还是一样的。

最佳答案

在父组件中，用指定所需列的material ui的GridList组件封装映射函数。然后将数据放入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>，就可以了。
请导入必要的依赖项。

关于html - 如何在React中水平对齐卡片元素(rmwc)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52011290/