所以,我在让 material-ui 网格按我想要的方式工作时遇到了问题。我正在尝试用两列渲染一行。
import React from 'react';
import DefaultLayout from '../layouts/default';
import Grid from '@material-ui/core/Grid';
class profile extends React.Component {
render() {
return (
<React.Fragment>
<Grid container spacing={8}>
<Grid item xs={12} style={{backgroundColor: 'blue', height: '250px'}}></Grid>
<Grid item xs={12} style={{backgroundColor: 'grey', height: '250px'}}></Grid>
{/* Form two columns with next row*/}
<Grid container={'true'} item sx={12}>
<Grid item={'true'} xs={6} md={8} style={{backgroundColor: 'green', height: '50px'}}></Grid>
<Grid item={'true'} xs={6} md={4} style={{backgroundColor: 'orange', height: '50px'}}></Grid>
</Grid>
</Grid>
</React.Fragment>
)}}
module.exports = profile;
目前,它正在渲染:
我希望橙色和绿色行是同一行上的两列。并排。
谁能破译我的代码有什么问题?
@material-ui/核心:^3.9.2
react :^16.7.0
最佳答案
您需要使用 GridList和 GridListTitle .
请尝试使用以下代码以获得所需的输出
import React from 'react';
import DefaultLayout from '../layouts/default';
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
class profile extends React.Component {
render() {
return (
<React.Fragment>
<GridList cols={1}>
<GridListTile style={{backgroundColor: 'green', height: '50px'}}>
</GridListTile>
<GridListTile style={{backgroundColor: 'orange', height: '50px'}}>
</GridListTile>
</GridList>
<GridList cols={2}>
<GridListTile style={{backgroundColor: 'green', height: '50px'}}>
</GridListTile>
<GridListTile style={{backgroundColor: 'orange', height: '50px'}}>
</GridListTile>
</GridList>
</React.Fragment>
)}}
module.exports = profile;
关于reactjs - 使用 Material-UI 嵌套网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54719254/