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

Question

我已经阅读了 Material 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 属性，它就超出了我的理解。所以当我注入(inject)以下行时:

<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