1

我有一个反应应用程序，我正在尝试使用 material-ui 1.0，它的 JSS 解决方案。它似乎对 justify 属性的任何对齐都没有反应。下面的代码我希望居中证明，但它没有发生。我已将代码放在我能想到的每个配置中，但它不起作用。

我觉得可能有些东西名字错了，但是 mattrial-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);
4

1 回答 1

2

您可以尝试由 Grid it self 提供的 alignitem 和 justify：

尝试：

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

请发现我使用 xs={3} 作为登录页面的响应宽度。随意更改这些值。

希望对你有帮助

于 2018-07-17T05:04:29.680 回答