如何在 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組件一起指定所需的列。 然后將您的數據包含在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>就可以了。 請務必導入必要的依賴項。