reactjs 是否有办法订购MUI卡以填充可用空间？

lmvvr0a8 于 2023-01-04 发布在 React

关注(0)|答案(2)|浏览(170)

现在看起来是这样的：old
我希望它看起来像这样：new
我使用MUI网格：

<Grid container spacing={2}>
     <Grid item xs={12} md={6}>
         <Box className="white-card">
             ....content...
         </Box>
     </Grid>
     <Grid item xs={12} md={6}>
         <Box className="white-card">
             ....content...
         </Box>
     </Grid>
</Grid>

reactjs

来源：https://stackoverflow.com/questions/74992140/is-there-a-way-to-order-mui-cards-in-react-to-fill-the-available-space

2条答案

按热度按时间

gxwragnw1#

如果您使用的是MUI v5，则可以使用Masonry组件代替Grid：
直接从doc示例中得出：

import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Masonry from '@mui/lab/Masonry';

const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(0.5),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function BasicMasonry() {
  return (
    <Box sx={{ width: 500, minHeight: 393 }}>
      <Masonry columns={4} spacing={2}>
        {heights.map((height, index) => (
          <Item key={index} sx={{ height }}>
            {index + 1}
          </Item>
        ))}
      </Masonry>
    </Box>
  );
}

CodeSandbox

赞(0）回复(0）举报 2023-01-04

ojsjcaue2#

只要在你的白卡课上加上100%的身高
这是一个codesandbox的例子，我在这里设置了高度和背景颜色
https://codesandbox.io/s/modest-dirac-dfq0w4?file=/demo.js

赞(0）回复(0）举报 2023-01-04