Question

我正在尝试从Material UI文档（https://codesandbox.io/s/9rvlm）中的示例中了解此代码示例https://material-ui.com/components/grid/：

$token->accessTokenKey;

我的问题是：将$token['accessTokenKey'];分配给父import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const styles = theme => ({ root: { flexGrow: 1, }, paper: { padding: theme.spacing(2), textAlign: 'center', color: theme.palette.text.secondary, }, }); function CenteredGrid(props) { const { classes } = props; return ( <div className={classes.root}> <Grid container spacing={3}> <Grid item xs={12}> <Paper className={classes.paper}>xs=12</Paper> </Grid> <Grid item xs={6}> <Paper className={classes.paper}>xs=6</Paper> </Grid> <Grid item xs={6}> <Paper className={classes.paper}>xs=6</Paper> </Grid> <Grid item xs={3}> <Paper className={classes.paper}>xs=3</Paper> </Grid> <Grid item xs={3}> <Paper className={classes.paper}>xs=3</Paper> </Grid> <Grid item xs={3}> <Paper className={classes.paper}>xs=3</Paper> </Grid> <Grid item xs={3}> <Paper className={classes.paper}>xs=3</Paper> </Grid> </Grid> </div> ); } CenteredGrid.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(CenteredGrid);元素的目的是什么？

据https://material-ui.com/system/flexbox/#flex-grow和https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow所了解，flexGrow: 1是flex容器项目的CSS属性。在这个示例中，我没有看到包含该组件的flex容器元素； div直接显示在根div中（作为flex-grow）。

是否CenteredGrid应用于父div“以防万一”，将组件呈现在flex容器中？我希望澄清一下。

Answer 1

上述安东尼的评论对我来说似乎是正确的答案。如果将父级设置为display：flex并且正在加载的子组件不具有flex：1或flex-grow：1，则它将不会占用父级的100％宽度。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; ">
    <div style="border:1px solid red; flex-grow:1; ">parent is not flex container - child div takes 100% width</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; ">parent is flex container - sorry</div>
  </div>
  <br/>
  <div style="border:1px solid black; padding:2px; display:flex; ">
    <div style="border:1px solid red; display:flex; flex-grow:1;">parent is flex container - child div takes 100%</div>
  </div>
</body>
</html>

Answer 2

AnthonyZ的评论说：

唯一的改变是当有弹性的时候父母。

但是在React App中，主体中的外部Div并不是最外部的父级。在HTML / CSS中，即HTML和BODY。在create-react-app中，它们在index.css或（浏览器的）基本样式表中获得默认的“ display：block”。

我通过以下操作解决了该问题：

将index.css移至公开位置

严重的是，为什么/ src中的index.css和/ public中的index.html？

修改index.css

在index.css中为HTML和BODY指定“ display：flex”

html {
  display: flex;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display:flex;
  flex-grow: 1;
}

修改App.js

在App.js中创建一个外部div

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
}));

// ....

function App() {

    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Provider store={store}>
                <BrowserRouter>
                    <TopMenu/>
                    <AllRoutes/>
                </BrowserRouter>
            </Provider>
        </div>
    );
}

TopMenu.js


const useStyles = makeStyles((theme) => ({
    offset: theme.mixins.toolbar,
    
    title: {
        flexGrow: 1,
    },
}));


export default function TopMenu() {
    
    const classes = useStyles();
    
    return (
        <React.Fragment>
            <AppBar position="fixed">
                <Toolbar variant='dense'>
                    <Typography variant="h6" className={classes.title}>
                        Application Title
                    </Typography>
                    <MainMenu/>
                </Toolbar>
            </AppBar>
            <div className={classes.offset}/>
        </React.Fragment>

    );
}

如果检查元素，您会发现整个高度都是从HTML标签开始的。

此解决方案的问题：令人讨厌的滚动条使您可以滚动AppBar的高度。如果有人有解决方案，我将编辑我的答案（或在有更好解决方案时删除答案：-））

是否在Material UI网格的父div中使用flexGrow？

2 个答案:

将index.css移至公开位置

修改index.css

修改App.js

TopMenu.js