[Icon] Add support for CSS variables (#32595)

mui · May 4, 2022 · d26ad1a · d26ad1a
1 parent a573dde
commit d26ad1a
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 8 deletions.
diff --git a/docs/pages/experiments/material-ui/icon.tsx b/docs/pages/experiments/material-ui/icon.tsx
@@ -0,0 +1,70 @@
+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 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 Icon, { IconProps } from '@mui/material/Icon';
+
+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>
+  );
+};
+
+const COLORS = ['primary', 'secondary', 'error', 'info', 'warning', 'success'];
+
+export default function CssVarsTemplate() {
+  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',
+            },
+          }}
+        >
+          {COLORS.map((color: string) => (
+            <Icon key={`color-${color}`} color={color as IconProps['color']}>
+              star
+            </Icon>
+          ))}
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js
@@ -51,14 +51,14 @@ const IconRoot = styled('span', {
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
   color: {
-    primary: theme.palette.primary.main,
-    secondary: theme.palette.secondary.main,
-    info: theme.palette.info.main,
-    success: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    action: theme.palette.action.active,
-    error: theme.palette.error.main,
-    disabled: theme.palette.action.disabled,
+    primary: (theme.vars || theme).palette.primary.main,
+    secondary: (theme.vars || theme).palette.secondary.main,
+    info: (theme.vars || theme).palette.info.main,
+    success: (theme.vars || theme).palette.success.main,
+    warning: (theme.vars || theme).palette.warning.main,
+    action: (theme.vars || theme).palette.action.active,
+    error: (theme.vars || theme).palette.error.main,
+    disabled: (theme.vars || theme).palette.action.disabled,
     inherit: undefined,
   }[ownerState.color],
 }));