[base-ui][docs] Update listbox slot style in demo (#40952)

Co-authored-by: zanivan <victorzanivan@gmail.com>
mui · Feb 6, 2024 · b813ffc · b813ffc
1 parent dda1c1f
commit b813ffc
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.js
@@ -1,10 +1,32 @@
 import * as React from 'react';
 import { Select } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function OverridingInternalSlot() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Select slots={{ listbox: 'ol' }} defaultValue="First option">
+    <Select
+      slots={{ listbox: 'ol' }}
+      slotProps={{
+        listbox: {
+          style: {
+            backgroundColor: isDarkMode ? 'black' : 'white',
+            padding: '8px 12px',
+            listStylePosition: 'inside',
+            boxSizing: 'border-box',
+          },
+        },
+      }}
+      defaultValue="First option"
+    >
       <Option value="First option">First option</Option>
       <Option value="Second option">Second option</Option>
     </Select>

diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx
@@ -1,10 +1,32 @@
 import * as React from 'react';
 import { Select } from '@mui/base/Select';
 import { Option } from '@mui/base/Option';
+import { useTheme } from '@mui/system';
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
 
 export default function OverridingInternalSlot() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
-    <Select slots={{ listbox: 'ol' }} defaultValue="First option">
+    <Select
+      slots={{ listbox: 'ol' }}
+      slotProps={{
+        listbox: {
+          style: {
+            backgroundColor: isDarkMode ? 'black' : 'white',
+            padding: '8px 12px',
+            listStylePosition: 'inside',
+            boxSizing: 'border-box',
+          },
+        },
+      }}
+      defaultValue="First option"
+    >
       <Option value="First option">First option</Option>
       <Option value="Second option">Second option</Option>
     </Select>

diff --git a/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx.preview b/docs/data/base/guides/overriding-component-structure/OverridingInternalSlot.tsx.preview