Material-ui jss doesn't respect justify content

Question

I have a react app and I am trying to use material-ui 1.0, with it's JSS solutions. It does not seem to respond to any alignment of justify properties. The code below I would expect to center justify, but it isn't happening. I have placed the code in every configuration I can think of but it is not working.

I feel like maybe something is misnamed but matrial-ui doesn't document it's jss solutions very well and this is my first time using this system to style an app.

    // 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);

Answer 1

You can try alignitem and justify provided by Grid it self:

try:

 <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>

please find that I have used xs={3} as responsive width for the login page. feel free to change those values.

hope this will help you