init project

docs/data/joy/components/box/BoxSx.tsx

@@ -0,0 +1,32 @@
+import { Box, ThemeProvider } from '@mui/joy';
+
+export default function BoxSx() {
+  return (
+    <ThemeProvider
+      theme={{
+        colorSchemes: {
+          light: {
+            palette: {
+              primary: {
+                400: '#38bdf8',
+                700: '#0369a1',
+              },
+            },
+          },
+        },
+      }}
+    >
+      <Box
+        sx={{
+          width: 100,
+          height: 100,
+          borderRadius: 1,
+          bgcolor: 'primary.700',
+          '&:hover': {
+            bgcolor: 'primary.400',
+          },
+        }}
+      />
+    </ThemeProvider>
+  );
+}