Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it.
I suspect there might be a naming issue since material-ui doesn't provide comprehensive documentation on their JSS solutions. This is my first time styling an app with this system.
// 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);