材料用户界面JSS不尊重证明内容

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

我觉得有些东西命名错误,但MatrialUI并没有很好地记录它的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);