Change style of div items in demos (as same as those in Grid)

mui · Sep 2, 2021 · bd5bbf5 · bd5bbf5
1 parent 26abce8
commit bd5bbf5
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 158 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>