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

Question

我已经阅读了材料UI网格列表和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

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