Material-ui jss不尊重證明內容

Question

我有一個react應用程序，我正在嘗試使用material-ui 1.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);

Answer 1

您可以嘗試alignitem並證明Grid自身提供的合理性：

嘗試：

 <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}作為登錄頁面的響應寬度。 隨時更改這些值。

希望這個能對您有所幫助