html - 如何在 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

在父组件中 用 GridList 附上您的 map 函数指定所需列的 material-ui 组件。然后将您的数据附在 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>你很高兴去。 请导入必要的依赖项。