CSS 全宽 Material-UI 网格无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49797264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Width Material-UI Grid not working as it should
提问by James
I am trying to understand Material-UI@next grid layout system.
我正在尝试了解 Material-UI@next 网格布局系统。
My goal is to have two papers that expand through the whole width screen and break whenever the screen gets smaller to just one paper. The documentationhas the following code snippet:
我的目标是让两张纸扩展到整个宽度的屏幕，并在屏幕变小到只有一张纸时破裂。该文档具有以下代码片段：
<Container>
<Grid container spacing={24}>
<Grid item xs={12}>
<Paper>xs=12</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
<Grid item xs={6} sm={3}>
<Paper>xs=6 sm=3</Paper>
</Grid>
</Grid>
</Container>
This results in the following:
这导致以下结果：
I then modified the code to try to achieve my goal of just two papers, as this:
然后我修改了代码以尝试实现我只有两篇论文的目标，如下所示：
<Container>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
</Container>
But as you can see, this results into two papers which are not taking the whole screen:
但正如你所看到的，这导致两篇论文没有占据整个屏幕：
Can someone point me to a working example snippet that allows me to have two elements that take the full width?
有人可以给我指出一个工作示例片段，它允许我拥有两个全宽的元素吗？
采纳答案by Paul McLoughlin
I suspect the Container component is causing you problems. Since you haven't linked its implementation, see below for a working example of what you want.
我怀疑 Container 组件给您带来了问题。由于您尚未链接其实现，请参阅下面的示例以了解您想要的内容。
Since Material uses flexboxthey make use of property flexGrow
由于 Material 使用了flexbox，因此它们使用了flexGrow属性
The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies what amount of space inside the flex container the item should take up. The flex grow factor of a flex item is relative to the size of the other children in the flex-container.
flex-grow CSS 属性指定弹性项目的弹性增长因子。它指定了项目应该在 flex 容器内占用多少空间。弹性项目的弹性增长因子与弹性容器中其他子项的大小有关。
This is the property that governs the growth of elements in the grid.
这是控制网格中元素增长的属性。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
const styles = theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit * 2,
textAlign: 'center',
color: theme.palette.text.secondary,
},
});
function CenteredGrid(props) {
const { classes } = props;
return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper>xs=12 sm=6</Paper>
</Grid>
</Grid>
</div>
);
}
CenteredGrid.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CenteredGrid);
回答by Dylan Pierce
For those using Material UI with styled-components, here's how I was able to get the grid items to grow correctly:
对于那些使用 Material UI 的人styled-components，以下是我如何让网格项目正确增长：
import GridBase from "@material-ui/core/Grid";
const Grid = styled(GridBase)`
.MuiGrid-root {
flex-grow: 1;
}
`
Now you can use Gridnormally in your components.
现在您可以Grid在您的组件中正常使用。
