Wrap LinearProgressWithLabel in Box with bgcolor

Author: khgiddon

docs/data/joy/components/linear-progress/LinearProgressWithLabel.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
 
 export default function LinearProgressWithLabel() {
   const [progress, setProgress] = React.useState(0);
@@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() {
   }, []);
 
   return (
-    <LinearProgress
-      determinate
-      variant="outlined"
-      color="neutral"
-      size="sm"
-      thickness={32}
-      value={progress}
+    <Box
       sx={{
-        '--LinearProgress-radius': '0px',
-        '--LinearProgress-progressThickness': '24px',
-        boxShadow: 'sm',
-        borderColor: 'neutral.500',
+        bgcolor: 'white',
+        width: '100%',
       }}
     >
-      <Typography
-        level="body-xs"
-        fontWeight="xl"
-        textColor="common.white"
-        sx={{ mixBlendMode: 'difference' }}
+      <LinearProgress
+        determinate
+        variant="outlined"
+        color="neutral"
+        size="sm"
+        thickness={32}
+        value={progress}
+        sx={{
+          '--LinearProgress-radius': '0px',
+          '--LinearProgress-progressThickness': '24px',
+          boxShadow: 'sm',
+          borderColor: 'neutral.500',
+        }}
       >
-        LOADING… {`${Math.round(progress)}%`}
-      </Typography>
-    </LinearProgress>
+        <Typography
+          level="body-xs"
+          fontWeight="xl"
+          textColor="common.white"
+          sx={{ mixBlendMode: 'difference' }}
+        >
+          LOADING… {`${Math.round(progress)}%`}
+        </Typography>
+      </LinearProgress>
+    </Box>
   );
 }

docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
 
 export default function LinearProgressWithLabel() {
   const [progress, setProgress] = React.useState(0);
@@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() {
   }, []);
 
   return (
-    <LinearProgress
-      determinate
-      variant="outlined"
-      color="neutral"
-      size="sm"
-      thickness={32}
-      value={progress}
+    <Box
       sx={{
-        '--LinearProgress-radius': '0px',
-        '--LinearProgress-progressThickness': '24px',
-        boxShadow: 'sm',
-        borderColor: 'neutral.500',
+        bgcolor: 'white',
+        width: '100%',
       }}
     >
-      <Typography
-        level="body-xs"
-        fontWeight="xl"
-        textColor="common.white"
-        sx={{ mixBlendMode: 'difference' }}
+      <LinearProgress
+        determinate
+        variant="outlined"
+        color="neutral"
+        size="sm"
+        thickness={32}
+        value={progress}
+        sx={{
+          '--LinearProgress-radius': '0px',
+          '--LinearProgress-progressThickness': '24px',
+          boxShadow: 'sm',
+          borderColor: 'neutral.500',
+        }}
       >
-        LOADING… {`${Math.round(progress)}%`}
-      </Typography>
-    </LinearProgress>
+        <Typography
+          level="body-xs"
+          fontWeight="xl"
+          textColor="common.white"
+          sx={{ mixBlendMode: 'difference' }}
+        >
+          LOADING… {`${Math.round(progress)}%`}
+        </Typography>
+      </LinearProgress>
+    </Box>
   );
 }