[docs][system] Fix border color of Boxes in demos of `Configure the s…

…x prop` page in dark mode (mui#35961)
mnajdova · Jan 27, 2023 · 0c2caaf · 0c2caaf
1 parent a41260a
commit 0c2caaf
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 18 deletions.
diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { createTheme, ThemeProvider, Box, Stack } from '@mui/system';
+import { Box, Stack } from '@mui/system';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 // Retain type safety.
 
 const theme = createTheme({
   unstable_sxConfig: {
-    // You can now use the background key in sx
+    // You can now use the borderRadius key in sx
     // by providing direct values from the palette
     borderRadius: {
       themeKey: 'shape',
@@ -22,9 +23,9 @@ export default function ChangeTheBehaviorSxProp() {
   return (
     <Stack direction="row" gap={1}>
       <ThemeProvider theme={theme}>
-        <Box sx={{ borderRadius: 'sm', border: '1px solid black', p: 4 }} />
-        <Box sx={{ borderRadius: 'md', border: '1px solid black', p: 4 }} />
-        <Box sx={{ borderRadius: 'lg', border: '1px solid black', p: 4 }} />
+        <Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
+        <Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
+        <Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
       </ThemeProvider>
     </Stack>
   );

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createTheme, ThemeProvider, Box, Stack } from '@mui/system';
+import { Box, Stack } from '@mui/system';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 // Retain type safety.
 declare module '@mui/system' {
@@ -12,7 +13,7 @@ declare module '@mui/system' {
 
 const theme = createTheme({
   unstable_sxConfig: {
-    // You can now use the background key in sx
+    // You can now use the borderRadius key in sx
     // by providing direct values from the palette
     borderRadius: {
       themeKey: 'shape',
@@ -29,9 +30,9 @@ export default function ChangeTheBehaviorSxProp() {
   return (
     <Stack direction="row" gap={1}>
       <ThemeProvider theme={theme}>
-        <Box sx={{ borderRadius: 'sm', border: '1px solid black', p: 4 }} />
-        <Box sx={{ borderRadius: 'md', border: '1px solid black', p: 4 }} />
-        <Box sx={{ borderRadius: 'lg', border: '1px solid black', p: 4 }} />
+        <Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
+        <Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
+        <Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
       </ThemeProvider>
     </Stack>
   );

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx.preview
@@ -1,5 +1,5 @@
 <ThemeProvider theme={theme}>
-  <Box sx={{ borderRadius: 'sm', border: '1px solid black', p: 4 }} />
-  <Box sx={{ borderRadius: 'md', border: '1px solid black', p: 4 }} />
-  <Box sx={{ borderRadius: 'lg', border: '1px solid black', p: 4 }} />
+  <Box sx={{ borderRadius: 'sm', border: 1, p: 4 }} />
+  <Box sx={{ borderRadius: 'md', border: 1, p: 4 }} />
+  <Box sx={{ borderRadius: 'lg', border: 1, p: 4 }} />
 </ThemeProvider>
diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system';
+import { Box, handleBreakpoints } from '@mui/system';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const customTheme = createTheme({
   unstable_sxConfig: {
@@ -29,7 +30,7 @@ export default function ExtendSxProp() {
       <Box
         sx={{
           size: 10,
-          border: '1px solid black',
+          border: 1,
         }}
       />
     </ThemeProvider>

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { createTheme, ThemeProvider, Box, handleBreakpoints } from '@mui/system';
+import { Box, handleBreakpoints } from '@mui/system';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const customTheme = createTheme({
   unstable_sxConfig: {
@@ -29,7 +30,7 @@ export default function ExtendSxProp() {
       <Box
         sx={{
           size: 10,
-          border: '1px solid black',
+          border: 1,
         }}
       />
     </ThemeProvider>

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview b/docs/data/system/experimental-api/configure-the-sx-prop/ExtendTheSxProp.tsx.preview
@@ -2,7 +2,7 @@
   <Box
     sx={{
       size: 10,
-      border: '1px solid black',
+      border: 1,
     }}
   />
 </ThemeProvider>