Question

我已经阅读了我理解的Material UI Grid List和Flexbox / FlexGrow属性，如果我未指定方向，则该属性可以正常工作。我试图建立一个垂直方向的网格。看起来当我们分配 align-center 属性时，宽度不是我们指定的宽度。示例：（样式）

const styles = () => ({
    root: {
        flexGrow: 1,
    },

    paper: {
        margin: '10px'
    },

    textField: {
        width: '100%',
        marginTop: '10px',
        marginLeft: '10px'
    },

    gridBorder: { 
        borderColor: 'transparent',
        borderWidth: 'thin',
        borderStyle: 'dotted',
        borderRadius: '12px'
    }
});

渲染方法：

<div id='registration'>
    <Grid container spacing={4} direction='column' className={classes.root}>
        <Grid item xl={4} lg={4} xs={12}>
            <TextField required label="Email" id='' className={classes.textField}  onChange={this.handleChange}  />
        </Grid>
        <Grid item xl={4} lg={4} xs={12}>
            <TextField required label="Password" id='' className={classes.textField}  onChange={this.handleChange}  />
        </Grid>
    </Grid>
</div>

它看起来像这样：。这似乎是正确的，但是一旦我设置了 align-items 属性，它就超出了我的理解。因此，当我注入以下行时：

<Grid container spacing={4} direction='column' className={classes.root} alignItems='center'>

它开始看起来像这样：我在这里阅读了各种主题，但没有一个主题讨论了方向。有人可以帮我理解吗？为什么将宽度设置为居中后宽度会减小？我想念的是什么？

更新：我可以通过一种解决方法对其进行修复。但我真的很希望能够在不使用此替代方法的情况下将其居中对齐。我在原始网格之前添加了一个伪网格，以使其看起来像居中。代码是：

<Grid container direction='row'>
    <Grid item xs={1} xl={4} lg={4}>
        <Grid container direction='column' className={[classes.root, 'same-row', 'background-test'].join(' ')}>
            <Grid item>Fake Grid</Grid>
        </Grid>
    </Grid>
    <Grid item  xs={1} xl={4} lg={4}>
        <Grid container direction='column' className={[classes.root, 'same-row'].join(' ')}>
            <Grid item>
                <TextField required label="Email" id='' className={classes.textField}  onChange={this.handleChange}  />
            </Grid>
            <Grid item>
                <TextField required label="Password" id='' className={classes.textField}  onChange={this.handleChange}  />
            </Grid>
        </Grid>            
    </Grid>
</Grid>

，结果为：。但是仍然没有回答我的问题，为什么对齐中心会减小宽度。

Answer 1

列网格不支持使用断点：

https://material-ui.com/components/grid/#direction-column-column-reverse

Answer 2

在官方文档页面上，网格没有间距= {4}。枚举的容器类型为8，所以我想这是问题的根源。

Material-ui网格响应方向列宽不起作用

2 个答案: