Javascript 材料ui jss不'；不尊重和证明内容的正当性

我有一个react应用程序，我正在尝试使用MaterialUI1.0和它的JSS解决方案。它似乎不响应属性的任何对齐。我希望下面的代码能够居中调整，但它没有发生。我已经把代码放在了我能想到的每一个配置中，但它不起作用

我觉得有些东西可能命名错误，但matrial ui并没有很好地记录它的jss解决方案，这是我第一次使用这个系统来设计应用程序

    // react
    import React, { Component } from 'react';
    import { withStyles } from 'material-ui/styles';

    // vendor
    import Grid from 'material-ui/Grid';

    // source
    import LoginPage from 'components/pages/auth-page';
    import BasePage from 'components/pages/base';

    const styles = theme => ({
        root: {
            display: "flex",
            height: "100%",
            [theme.breakpoints.down('sm')]: {
                width: "100%",
            },
            [theme.breakpoints.up('md')]: {
                width: "80%",
            },
            [theme.breakpoints.up('lg')]: {
                width: "70%",
            },
        },
        river: {
            display: "flex",
            marginTop: "75px",
            flexGrow: 1,
            justifyContent: "center",
            alignItems: "center",
        },
    });

    class Application extends Component {

        constructor(props){
            super(props);
        }

        render(){
            const { classes } = this.props;

            return(            
                <div id={"root"} className={classes.root}>
                    <Grid container className={classes.river}>
                        {this.state.authorized
                            ? <BasePage />
                            : <LoginPage /> 
                        }
                    </Grid>
                </div>
            )
        }
    }

    export default withStyles(styles)(Application);

//反应
从“React”导入React，{Component}；
从“材质ui/样式”导入{withStyles}；
//卖主
从“物料界面/网格”导入网格；
//来源
从“组件/页面/验证页面”导入登录页面；
从“组件/页面/基础”导入BasePage；
常量样式=主题=>({
根目录：{
显示：“flex”，
高度：“100%”，
[theme.breakpoints.down（'sm'）：{
宽度：“100%”，
},
[主题.breakpoints.up（'md'）]：{
宽度：“80%”，
},
[theme.breakpoints.up（'lg'）：{
宽度：“70%”，
},
},
河流：{
显示：“flex”，
玛金托普：“75px”，
flexGrow:1，
辩护内容：“中心”，
对齐项目：“中心”，
},
});
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{classes}=this.props；
报税表（
{this.state.authorized
? 
:  
}
)
}
}
导出默认样式（样式）（应用程序）；

您可以尝试对齐Grid it自身提供的项目并证明其合理性：

尝试：

虽然你的回答不太有效，但它把我引向了正确的方向。实际上我必须换一个上面的包装。然而，我基本上是在和jss作战。谢谢
 <div id={"root"} className={classes.root}>
  <div className={classes.river}
    <Grid 
     spacing={0}
     direction="column"
     alignItems="center"
     justify="center"
    >
     <Grid item xs={3}>
      <LoginPage /> 
     </Grid>
    </Grid>
   </div>
  </div>