[BottomNavigation] Add support for CSS variables

docs/pages/experiments/material-ui/bottom-navigation.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  useColorScheme,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Moon from '@mui/icons-material/DarkMode';
+import Sun from '@mui/icons-material/LightMode';
+import RestoreIcon from '@mui/icons-material/Restore';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+
+const ColorSchemePicker = () => {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+    >
+      {mode === 'light' ? <Moon /> : <Sun />}
+    </Button>
+  );
+};
+
+export default function CssVarsTemplate() {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <BottomNavigation
+            showLabels
+            value={value}
+            onChange={(event, newValue) => {
+              setValue(newValue);
+            }}
+          >
+            <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
+            <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+            <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+          </BottomNavigation>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}

packages/mui-material/src/BottomNavigation/BottomNavigation.js

@@ -25,7 +25,7 @@ const BottomNavigationRoot = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   height: 56,
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
 }));
 
 const BottomNavigation = React.forwardRef(function BottomNavigation(inProps, ref) {

packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js

@@ -36,7 +36,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   padding: '0px 12px',
   minWidth: 80,
   maxWidth: 168,
-  color: theme.palette.text.secondary,
+  color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
   flex: '1',
   ...(!ownerState.showLabel &&
@@ -49,7 +49,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
       paddingTop: 0,
     }),
   [`&.${bottomNavigationActionClasses.selected}`]: {
-    color: theme.palette.primary.main,
+    color: (theme.vars || theme).palette.primary.main,
   },
 }));