React MUI Masonry API

MUI或Material-UI 是一个UI库，为React提供了预定义的强大和可定制的组件，以便更轻松进行web开发。MUI设计基于Google的Material Design。

在本文中，我们将讨论 React MUI Masonry API 。Masonry组件以可配置的间距和尺寸布置不同尺寸的容器内容。API提供了许多功能，我们将学习如何实现它们。

导入Masonry API

import Masonry from '@mui/lab/Masonry';
// or
import { Masonry } from '@mui/lab';

属性列表： 下面是与此组件一起使用的不同属性列表。我们可以根据需要访问并修改它们。

children(node) ：组件的内容。
classes(object) ：覆盖或应用样式到元素。
columns(number/object/string) ：用于设置列的数量。默认值为4。
defaultColumns(number) ：用于设置默认列数。
defaultHeight(number) ：用于设置默认高度（像素）。
defaultSpacing(number) ：用于设置组件之间的默认间距。
**sx (Array / func / object) ** ：系统属性允许定义系统覆盖以及其他CSS样式。
spacing(number/object/string) ：用于设置组件之间的间距。默认值为1。

CSS规则：

root(.MuiMasonry-root) ：应用于根元素的样式。

语法： 按如下创建Masonry组件：

<Masonry columns={6} spacing={1}>
    {sizes.map((size, index) => (
        <Item key={index} sx={{ size }}>
            {index + 1}
        </Item>
    ))}
</Masonry>

安装和创建React应用，并添加MUI依赖项：

步骤1： 使用以下命令创建一个React项目。

npx create-react-app gfg_tutorial

步骤2： 进入项目目录

cd gfg_tutorial

步骤3： 根据以下方式安装MUI的依赖：

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

项目结构:

React MUI Masonry API

步骤4： 按以下步骤运行项目：

npm start

示例1： 在下面的示例中，我们有一个包含数字值的Masonry元素。

App.js

import "./App.css"; 
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]; 
const Item = styled(Paper)(({ theme }) => ({ 
    backgroundColor: "#fff", 
    padding: theme.spacing(0.5), 
    textAlign: "center", 
    color: "purple", 
})); 
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI Masonry API</strong> 
            </div> 
            <br /> 
            <Box 
                sx={{ 
                    margin: "auto", 
                    display: "flex", 
                    justifyContent: "space-evenly", 
                    width: "50%", 
                }} 
            > 
                <Masonry columns={4} spacing={2}> 
                    {heights.map((height, index) => ( 
                        <Item key={index} sx={{ height }}> 
                            {index + 1} 
                        </Item> 
                    ))} 
                </Masonry> 
            </Box> 
        </div> 
    ); 
} 
export default App;

输出：

React MUI Masonry API

示例2 ：在下面的示例中，我们在一个列中有六个项，并且它们之间有更多的间距。

App.js

import "./App.css"; 
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]; 
const Item = styled(Paper)(({ theme }) => ({ 
    backgroundColor: "#fff", 
    padding: theme.spacing(0.5), 
    textAlign: "center", 
    color: "purple", 
})); 
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI Masonry API</strong> 
            </div> 
            <br /> 
            <Box 
                sx={{ 
                    margin: "auto", 
                    display: "flex", 
                    justifyContent: "space-evenly", 
                    width: "50%", 
                }} 
            > 
                <Masonry columns={6} spacing={5}> 
                    {heights.map((height, index) => ( 
                        <Item key={index} sx={{ height }}> 
                            {index + 1} 
                        </Item> 
                    ))} 
                </Masonry> 
            </Box> 
        </div> 
    ); 
} 
export default App;

输出:

React MUI Masonry API