add error color prop to MenuItem

src/components/Table/ColumnMenu/MenuContents.tsx

@@ -1,12 +1,6 @@
 import { Fragment } from "react";
 
-import {
-  MenuItem,
-  ListItemIcon,
-  ListSubheader,
-  Divider,
-} from "@mui/material";
-import { alpha } from "@mui/material/styles";
+import { MenuItem, ListItemIcon, ListSubheader, Divider } from "@mui/material";
 
 export interface IMenuContentsProps {
   menuItems: {
@@ -43,38 +37,11 @@ export default function MenuContents({ menuItems }: IMenuContentsProps) {
           <MenuItem
             key={index}
             onClick={item.onClick}
-            sx={
-              item.color === "error"
-                ? {
-                    color: "error.main",
-                    "&:hover": {
-                      backgroundColor: (theme) =>
-                        alpha(
-                          theme.palette.error.main,
-                          theme.palette.action.hoverOpacity
-                        ),
-                    },
-                  }
-                : undefined
-            }
+            color={item.color}
             selected={item.active}
             disabled={item.disabled}
           >
-            <ListItemIcon
-              sx={
-                item.color === "error"
-                  ? {
-                      color: (theme) =>
-                        alpha(
-                          theme.palette.error.main,
-                          theme.palette.action.activeOpacity * 1.1
-                        ),
-                    }
-                  : undefined
-              }
-            >
-              {icon}
-            </ListItemIcon>
+            <ListItemIcon>{icon}</ListItemIcon>
             {item.active ? item.activeLabel : item.label}
           </MenuItem>
         );

src/theme/components.tsx

@@ -1,4 +1,4 @@
-import { Theme, ThemeOptions } from "@mui/material/styles";
+import { Theme, ThemeOptions, alpha } from "@mui/material/styles";
 import type {} from "@mui/lab/themeAugmentation";
 import { MultiSelectProps } from "@rowy/multiselect";
 import { toRem } from "./typography";
@@ -30,6 +30,12 @@ declare module "@mui/material/styles" {
   }
 }
 
+declare module "@mui/material/MenuItem" {
+  interface MenuItemPropsVariantOverrides {
+    error: true;
+  }
+}
+
 export const components = (theme: Theme): ThemeOptions => {
   const buttonPrimaryHover = colord(theme.palette.primary.main)
     .mix(theme.palette.primary.contrastText, 0.12)
@@ -436,6 +442,28 @@ export const components = (theme: Theme): ThemeOptions => {
             },
           },
         },
+
+        variants: [
+          {
+            props: { color: "error" },
+            style: {
+              color: theme.palette.error.main,
+              "&:hover": {
+                backgroundColor: alpha(
+                  theme.palette.error.main,
+                  theme.palette.action.hoverOpacity
+                ),
+              },
+
+              "& .MuiListItemIcon-root .MuiSvgIcon-root": {
+                color: alpha(
+                  theme.palette.error.main,
+                  theme.palette.action.activeOpacity * 1.1
+                ),
+              },
+            },
+          },
+        ],
       },
       MuiListSubheader: {
         defaultProps: { disableSticky: true },