From bd5bbf5ab2b59a15fd375b41d016d064a19279ad Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 25 Aug 2021 14:11:22 +0100
Subject: [PATCH] Change style of div items in demos (as same as those in Grid)

---
 .../pages/components/masonry/BasicMasonry.js  | 21 ++++++++++---------
 .../pages/components/masonry/BasicMasonry.tsx | 21 ++++++++++---------
 .../components/masonry/DiffColSizeMasonry.js  | 21 ++++++++++---------
 .../components/masonry/DiffColSizeMasonry.tsx | 21 ++++++++++---------
 .../masonry/DiffColSizeMasonryBroken.js       | 21 ++++++++++---------
 .../masonry/DiffColSizeMasonryBroken.tsx      | 21 ++++++++++---------
 .../pages/components/masonry/FixedColumns.js  | 21 ++++++++++---------
 .../pages/components/masonry/FixedColumns.tsx | 21 ++++++++++---------
 .../pages/components/masonry/FixedSpacing.js  | 21 ++++++++++---------
 .../pages/components/masonry/FixedSpacing.tsx | 21 ++++++++++---------
 .../components/masonry/ResponsiveColumns.js   | 21 ++++++++++---------
 .../components/masonry/ResponsiveColumns.tsx  | 21 ++++++++++---------
 .../components/masonry/ResponsiveSpacing.js   | 21 ++++++++++---------
 .../components/masonry/ResponsiveSpacing.tsx  | 21 ++++++++++---------
 .../pages/components/masonry/SSRMasonry.js    | 20 ++++++++++--------
 .../pages/components/masonry/SSRMasonry.tsx   | 20 ++++++++++--------
 16 files changed, 176 insertions(+), 158 deletions(-)

diff --git a/docs/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
index e412a2abaa0ee3..e8f960ca9f58e4 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.js
+++ b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function BasicMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx b/docs/src/pages/components/masonry/BasicMasonry.tsx
index e412a2abaa0ee3..e8f960ca9f58e4 100644
--- a/docs/src/pages/components/masonry/BasicMasonry.tsx
+++ b/docs/src/pages/components/masonry/BasicMasonry.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function BasicMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.js b/docs/src/pages/components/masonry/DiffColSizeMasonry.js
index c60680bf2ef04e..1918ad562761c2 100644
--- a/docs/src/pages/components/masonry/DiffColSizeMasonry.js
+++ b/docs/src/pages/components/masonry/DiffColSizeMasonry.js
@@ -1,24 +1,25 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function DiffColSizeMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 500 }}>
       <Masonry columns={4} spacing={1}>
         {itemData.map((item, index) => (
           <MasonryItem key={index} columnSpan={item.span}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height: item.height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height: item.height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
index c60680bf2ef04e..1918ad562761c2 100644
--- a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
+++ b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
@@ -1,24 +1,25 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function DiffColSizeMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 500 }}>
       <Masonry columns={4} spacing={1}>
         {itemData.map((item, index) => (
           <MasonryItem key={index} columnSpan={item.span}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height: item.height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height: item.height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js
index 600d5304b84303..184a9861f8ff06 100644
--- a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js
+++ b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js
@@ -1,24 +1,25 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function DiffColSizeMasonryBroken() {
   return (
     <Box sx={{ width: 500, minHeight: 503 }}>
       <Masonry columns={4} spacing={1}>
         {itemData.map((item, index) => (
           <MasonryItem key={index} columnSpan={item.span}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height: item.height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height: item.height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx
index 600d5304b84303..184a9861f8ff06 100644
--- a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx
+++ b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx
@@ -1,24 +1,25 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function DiffColSizeMasonryBroken() {
   return (
     <Box sx={{ width: 500, minHeight: 503 }}>
       <Masonry columns={4} spacing={1}>
         {itemData.map((item, index) => (
           <MasonryItem key={index} columnSpan={item.span}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height: item.height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height: item.height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/FixedColumns.js b/docs/src/pages/components/masonry/FixedColumns.js
index a5666f4fe850cd..074256a9979844 100644
--- a/docs/src/pages/components/masonry/FixedColumns.js
+++ b/docs/src/pages/components/masonry/FixedColumns.js
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function FixedColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/FixedColumns.tsx b/docs/src/pages/components/masonry/FixedColumns.tsx
index a5666f4fe850cd..074256a9979844 100644
--- a/docs/src/pages/components/masonry/FixedColumns.tsx
+++ b/docs/src/pages/components/masonry/FixedColumns.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function FixedColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/FixedSpacing.js b/docs/src/pages/components/masonry/FixedSpacing.js
index bd5cb63d266834..6136416862403f 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.js
+++ b/docs/src/pages/components/masonry/FixedSpacing.js
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function FixedSpacing() {
   return (
     <Box sx={{ width: 500, minHeight: 377 }}>
       <Masonry columns={3} spacing={3}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/FixedSpacing.tsx b/docs/src/pages/components/masonry/FixedSpacing.tsx
index bd5cb63d266834..6136416862403f 100644
--- a/docs/src/pages/components/masonry/FixedSpacing.tsx
+++ b/docs/src/pages/components/masonry/FixedSpacing.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function FixedSpacing() {
   return (
     <Box sx={{ width: 500, minHeight: 377 }}>
       <Masonry columns={3} spacing={3}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.js b/docs/src/pages/components/masonry/ResponsiveColumns.js
index 76fd7c7003ee7f..c7c29e64fbbdfb 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.js
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.js
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function ResponsiveColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={{ xs: 3, sm: 4 }} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/ResponsiveColumns.tsx b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
index 76fd7c7003ee7f..c7c29e64fbbdfb 100644
--- a/docs/src/pages/components/masonry/ResponsiveColumns.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveColumns.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function ResponsiveColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={{ xs: 3, sm: 4 }} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.js b/docs/src/pages/components/masonry/ResponsiveSpacing.js
index 7aed88c6375de6..8bbdb70d5c4bfa 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.js
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.js
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function ResponsiveSpacing() {
   return (
     <Box sx={{ width: 500, minHeight: 377 }}>
       <Masonry columns={3} spacing={{ xs: 1, sm: 2, md: 3 }}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
index 7aed88c6375de6..8bbdb70d5c4bfa 100644
--- a/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
+++ b/docs/src/pages/components/masonry/ResponsiveSpacing.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function ResponsiveSpacing() {
   return (
     <Box sx={{ width: 500, minHeight: 377 }}>
       <Masonry columns={3} spacing={{ xs: 1, sm: 2, md: 3 }}>
         {heights.map((height, index) => (
           <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item sx={{ height }}>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/SSRMasonry.js b/docs/src/pages/components/masonry/SSRMasonry.js
index 1b8fbc5959f800..66560dee11c11f 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.js
+++ b/docs/src/pages/components/masonry/SSRMasonry.js
@@ -1,25 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function SSRMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index} defaultHeight={height}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>
diff --git a/docs/src/pages/components/masonry/SSRMasonry.tsx b/docs/src/pages/components/masonry/SSRMasonry.tsx
index 1b8fbc5959f800..66560dee11c11f 100644
--- a/docs/src/pages/components/masonry/SSRMasonry.tsx
+++ b/docs/src/pages/components/masonry/SSRMasonry.tsx
@@ -1,25 +1,27 @@
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
 import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 export default function SSRMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
           <MasonryItem key={index} defaultHeight={height}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
+            <Item>{index + 1}</Item>
           </MasonryItem>
         ))}
       </Masonry>