时间戳

首页 > 解决方案 > 我想将 flex-direction 属性设置为 Material UI Grid 标签

reactjs - 我想将 flex-direction 属性设置为 Material UI Grid 标签

问题描述

我想将方向属性设置为 Material UI 框架的 <Grid container> 组件。我已阅读文档 ，并尝试将方向属性设置为如下列：

<Grid container direction="column">
    <Grid item xs={12} >
        <h3 className="center-align">Log In</h3>
        <input type="text" id="user-email-on-login" placeholder="username@email.com" />
        <input type="password" id="user-password-on-login" placeholder="password" /> 
        <button>Log In</button>
    </Grid>

    <Grid item xs={12}>
        <button>Forgot Id/Password</button>
        <button>Create Account</button>
        <button>Remember Me</button>    
    </Grid>         
</Grid>

但输出不是预期的结果。输出似乎与我使用的方式相同direction="row"。当我删除 <Grid item> 标记时，<Grid container> 上的direction=column属性可以正常工作。

如果我必须使用 <Grid item> 标签，有没有办法将flex-direction属性设置为column？

标签： reactjsmaterial-ui

解决方案

您可以将“容器”属性添加到网格元素，从而具有“方向”属性。

一个项目可能同时是容器和项目。

无论如何，如果你想更精确，你可以上传一个沙盒的例子:)

这是您想要的示例： https ://stackblitz.com/edit/react-2m3blz

推荐阅读