diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx
new file mode 100644
index 00000000000000..4b2786f32e6d0b
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-chip/page.tsx
@@ -0,0 +1,93 @@
+'use client';
+import * as React from 'react';
+import AvatarChips from '../../../../../../docs/data/material/components/chips/AvatarChips';
+import BasicChips from '../../../../../../docs/data/material/components/chips/BasicChips';
+import ChipsArray from '../../../../../../docs/data/material/components/chips/ChipsArray';
+import ClickableAndDeletableChips from '../../../../../../docs/data/material/components/chips/ClickableAndDeletableChips';
+import ClickableChips from '../../../../../../docs/data/material/components/chips/ClickableChips';
+import ClickableLinkChips from '../../../../../../docs/data/material/components/chips/ClickableLinkChips';
+import ColorChips from '../../../../../../docs/data/material/components/chips/ColorChips';
+import CustomDeleteIconChips from '../../../../../../docs/data/material/components/chips/CustomDeleteIconChips';
+import DeletableChips from '../../../../../../docs/data/material/components/chips/DeletableChips';
+import IconChips from '../../../../../../docs/data/material/components/chips/IconChips';
+import MultilineChips from '../../../../../../docs/data/material/components/chips/MultilineChips';
+import SizesChips from '../../../../../../docs/data/material/components/chips/SizesChips';
+
+export default function Chips() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Avatar Chips</h2>
+        <div className="demo-container">
+          <AvatarChips />
+        </div>
+      </section>
+      <section>
+        <h2> Basic Chips</h2>
+        <div className="demo-container">
+          <BasicChips />
+        </div>
+      </section>
+      <section>
+        <h2> Chips Array</h2>
+        <div className="demo-container">
+          <ChipsArray />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable And Deletable Chips</h2>
+        <div className="demo-container">
+          <ClickableAndDeletableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable Chips</h2>
+        <div className="demo-container">
+          <ClickableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable Link Chips</h2>
+        <div className="demo-container">
+          <ClickableLinkChips />
+        </div>
+      </section>
+      <section>
+        <h2> Color Chips</h2>
+        <div className="demo-container">
+          <ColorChips />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Delete Icon Chips</h2>
+        <div className="demo-container">
+          <CustomDeleteIconChips />
+        </div>
+      </section>
+      <section>
+        <h2> Deletable Chips</h2>
+        <div className="demo-container">
+          <DeletableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Chips</h2>
+        <div className="demo-container">
+          <IconChips />
+        </div>
+      </section>
+      <section>
+        <h2> Multiline Chips</h2>
+        <div className="demo-container">
+          <MultilineChips />
+        </div>
+      </section>
+      <section>
+        <h2> Sizes Chips</h2>
+        <div className="demo-container">
+          <SizesChips />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx
new file mode 100644
index 00000000000000..2727c782aca916
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-chip.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import AvatarChips from '../../../../../docs/data/material/components/chips/AvatarChips.tsx';
+import BasicChips from '../../../../../docs/data/material/components/chips/BasicChips.tsx';
+import ChipsArray from '../../../../../docs/data/material/components/chips/ChipsArray.tsx';
+import ClickableAndDeletableChips from '../../../../../docs/data/material/components/chips/ClickableAndDeletableChips.tsx';
+import ClickableChips from '../../../../../docs/data/material/components/chips/ClickableChips.tsx';
+import ClickableLinkChips from '../../../../../docs/data/material/components/chips/ClickableLinkChips.tsx';
+import ColorChips from '../../../../../docs/data/material/components/chips/ColorChips.tsx';
+import CustomDeleteIconChips from '../../../../../docs/data/material/components/chips/CustomDeleteIconChips.tsx';
+import DeletableChips from '../../../../../docs/data/material/components/chips/DeletableChips.tsx';
+import IconChips from '../../../../../docs/data/material/components/chips/IconChips.tsx';
+import MultilineChips from '../../../../../docs/data/material/components/chips/MultilineChips.tsx';
+import SizesChips from '../../../../../docs/data/material/components/chips/SizesChips.tsx';
+
+export default function Chips() {
+  return (
+    <MaterialUILayout>
+      <h1>Chips</h1>
+      <section>
+        <h2> Avatar Chips</h2>
+        <div className="demo-container">
+          <AvatarChips />
+        </div>
+      </section>
+      <section>
+        <h2> Basic Chips</h2>
+        <div className="demo-container">
+          <BasicChips />
+        </div>
+      </section>
+      <section>
+        <h2> Chips Array</h2>
+        <div className="demo-container">
+          <ChipsArray />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable And Deletable Chips</h2>
+        <div className="demo-container">
+          <ClickableAndDeletableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable Chips</h2>
+        <div className="demo-container">
+          <ClickableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Clickable Link Chips</h2>
+        <div className="demo-container">
+          <ClickableLinkChips />
+        </div>
+      </section>
+      <section>
+        <h2> Color Chips</h2>
+        <div className="demo-container">
+          <ColorChips />
+        </div>
+      </section>
+      <section>
+        <h2> Custom Delete Icon Chips</h2>
+        <div className="demo-container">
+          <CustomDeleteIconChips />
+        </div>
+      </section>
+      <section>
+        <h2> Deletable Chips</h2>
+        <div className="demo-container">
+          <DeletableChips />
+        </div>
+      </section>
+      <section>
+        <h2> Icon Chips</h2>
+        <div className="demo-container">
+          <IconChips />
+        </div>
+      </section>
+      <section>
+        <h2> Multiline Chips</h2>
+        <div className="demo-container">
+          <MultilineChips />
+        </div>
+      </section>
+      <section>
+        <h2> Sizes Chips</h2>
+        <div className="demo-container">
+          <SizesChips />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index a8ffaf70cf30d8..3e66a758d40a05 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -9,10 +9,11 @@ import useForkRef from '../utils/useForkRef';
 import unsupportedProp from '../utils/unsupportedProp';
 import capitalize from '../utils/capitalize';
 import ButtonBase from '../ButtonBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 
+const useThemeProps = createUseThemeProps('MuiChip');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, disabled, size, color, iconColor, onDelete, clickable, variant } = ownerState;
 
@@ -75,224 +76,259 @@ const ChipRoot = styled('div', {
       styles[`${variant}${capitalize(color)}`],
     ];
   },
-})(
-  ({ theme, ownerState }) => {
-    const textColor =
-      theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-    return {
-      maxWidth: '100%',
-      fontFamily: theme.typography.fontFamily,
-      fontSize: theme.typography.pxToRem(13),
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: 32,
-      color: (theme.vars || theme).palette.text.primary,
-      backgroundColor: (theme.vars || theme).palette.action.selected,
-      borderRadius: 32 / 2,
-      whiteSpace: 'nowrap',
-      transition: theme.transitions.create(['background-color', 'box-shadow']),
-      // reset cursor explicitly in case ButtonBase is used
-      cursor: 'unset',
-      // We disable the focus ring for mouse, touch and keyboard users.
-      outline: 0,
-      textDecoration: 'none',
-      border: 0, // Remove `button` border
-      padding: 0, // Remove `button` padding
-      verticalAlign: 'middle',
-      boxSizing: 'border-box',
-      [`&.${chipClasses.disabled}`]: {
-        opacity: (theme.vars || theme).palette.action.disabledOpacity,
-        pointerEvents: 'none',
-      },
-      [`& .${chipClasses.avatar}`]: {
-        marginLeft: 5,
-        marginRight: -6,
-        width: 24,
-        height: 24,
-        color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
-        fontSize: theme.typography.pxToRem(12),
-      },
-      [`& .${chipClasses.avatarColorPrimary}`]: {
-        color: (theme.vars || theme).palette.primary.contrastText,
-        backgroundColor: (theme.vars || theme).palette.primary.dark,
-      },
-      [`& .${chipClasses.avatarColorSecondary}`]: {
-        color: (theme.vars || theme).palette.secondary.contrastText,
-        backgroundColor: (theme.vars || theme).palette.secondary.dark,
+})(({ theme }) => {
+  const textColor =
+    theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
+  return {
+    maxWidth: '100%',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(13),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: 'nowrap',
+    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    // reset cursor explicitly in case ButtonBase is used
+    cursor: 'unset',
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: 'none',
+    border: 0, // Remove `button` border
+    padding: 0, // Remove `button` padding
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    [`&.${chipClasses.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      pointerEvents: 'none',
+    },
+    [`& .${chipClasses.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
+      fontSize: theme.typography.pxToRem(12),
+    },
+    [`& .${chipClasses.avatarColorPrimary}`]: {
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark,
+    },
+    [`& .${chipClasses.avatarColorSecondary}`]: {
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark,
+    },
+    [`& .${chipClasses.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: theme.typography.pxToRem(10),
+    },
+    [`& .${chipClasses.icon}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+      WebkitTapHighlightColor: 'transparent',
+      color: theme.vars
+        ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)`
+        : alpha(theme.palette.text.primary, 0.26),
+      fontSize: 22,
+      cursor: 'pointer',
+      margin: '0 5px 0 -6px',
+      '&:hover': {
+        color: theme.vars
+          ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)`
+          : alpha(theme.palette.text.primary, 0.4),
       },
-      [`& .${chipClasses.avatarSmall}`]: {
-        marginLeft: 4,
-        marginRight: -4,
-        width: 18,
-        height: 18,
-        fontSize: theme.typography.pxToRem(10),
+    },
+    variants: [
+      {
+        props: { size: 'small' },
+        style: {
+          height: 24,
+          [`& .${chipClasses.icon}`]: {
+            fontSize: 18,
+            marginLeft: 4,
+            marginRight: -4,
+          },
+          [`& .${chipClasses.deleteIcon}`]: {
+            fontSize: 16,
+            marginRight: 4,
+            marginLeft: -4,
+          },
+        },
       },
-      [`& .${chipClasses.icon}`]: {
-        marginLeft: 5,
-        marginRight: -6,
-        ...(ownerState.size === 'small' && {
-          fontSize: 18,
-          marginLeft: 4,
-          marginRight: -4,
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main && value.contrastText)
+        .map(([color]) => {
+          return {
+            props: { color },
+            style: {
+              backgroundColor: (theme.vars || theme).palette[color].main,
+              color: (theme.vars || theme).palette[color].contrastText,
+              [`& .${chipClasses.deleteIcon}`]: {
+                color: theme.vars
+                  ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)`
+                  : alpha(theme.palette[color].contrastText, 0.7),
+                '&:hover, &:active': {
+                  color: (theme.vars || theme).palette[color].contrastText,
+                },
+              },
+            },
+          };
         }),
-        ...(ownerState.iconColor === ownerState.color && {
-          color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
-          ...(ownerState.color !== 'default' && {
+      {
+        props: (props) => props.iconColor === props.color,
+        style: {
+          [`& .${chipClasses.icon}`]: {
+            color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
+          },
+        },
+      },
+      {
+        props: (props) => props.iconColor === props.color && props.color !== 'default',
+        style: {
+          [`& .${chipClasses.icon}`]: {
             color: 'inherit',
-          }),
-        }),
+          },
+        },
       },
-      [`& .${chipClasses.deleteIcon}`]: {
-        WebkitTapHighlightColor: 'transparent',
-        color: theme.vars
-          ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)`
-          : alpha(theme.palette.text.primary, 0.26),
-        fontSize: 22,
-        cursor: 'pointer',
-        margin: '0 5px 0 -6px',
-        '&:hover': {
-          color: theme.vars
-            ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)`
-            : alpha(theme.palette.text.primary, 0.4),
+      {
+        props: { onDelete: true },
+        style: {
+          [`&.${chipClasses.focusVisible}`]: {
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+              : alpha(
+                  theme.palette.action.selected,
+                  theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+                ),
+          },
         },
-        ...(ownerState.size === 'small' && {
-          fontSize: 16,
-          marginRight: 4,
-          marginLeft: -4,
+      },
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.dark)
+        .map(([color]) => {
+          return {
+            props: { color, onDelete: true },
+            style: {
+              [`&.${chipClasses.focusVisible}`]: {
+                background: (theme.vars || theme).palette[color].dark,
+              },
+            },
+          };
         }),
-        ...(ownerState.color !== 'default' && {
-          color: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)`
-            : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-          '&:hover, &:active': {
-            color: (theme.vars || theme).palette[ownerState.color].contrastText,
+      {
+        props: { clickable: true },
+        style: {
+          userSelect: 'none',
+          WebkitTapHighlightColor: 'transparent',
+          cursor: 'pointer',
+          '&:hover': {
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+              : alpha(
+                  theme.palette.action.selected,
+                  theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+                ),
           },
-        }),
-      },
-      ...(ownerState.size === 'small' && {
-        height: 24,
-      }),
-      ...(ownerState.color !== 'default' && {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-        color: (theme.vars || theme).palette[ownerState.color].contrastText,
-      }),
-      ...(ownerState.onDelete && {
-        [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
-            : alpha(
-                theme.palette.action.selected,
-                theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-              ),
-        },
-      }),
-      ...(ownerState.onDelete &&
-        ownerState.color !== 'default' && {
           [`&.${chipClasses.focusVisible}`]: {
-            backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
+              : alpha(
+                  theme.palette.action.selected,
+                  theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
+                ),
+          },
+          '&:active': {
+            boxShadow: (theme.vars || theme).shadows[1],
           },
-        }),
-    };
-  },
-  ({ theme, ownerState }) => ({
-    ...(ownerState.clickable && {
-      userSelect: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      cursor: 'pointer',
-      '&:hover': {
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
-          : alpha(
-              theme.palette.action.selected,
-              theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
-            ),
-      },
-      [`&.${chipClasses.focusVisible}`]: {
-        backgroundColor: theme.vars
-          ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
-          : alpha(
-              theme.palette.action.selected,
-              theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
-            ),
-      },
-      '&:active': {
-        boxShadow: (theme.vars || theme).shadows[1],
-      },
-    }),
-    ...(ownerState.clickable &&
-      ownerState.color !== 'default' && {
-        [`&:hover, &.${chipClasses.focusVisible}`]: {
-          backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
         },
-      }),
-  }),
-  ({ theme, ownerState }) => ({
-    ...(ownerState.variant === 'outlined' && {
-      backgroundColor: 'transparent',
-      border: theme.vars
-        ? `1px solid ${theme.vars.palette.Chip.defaultBorder}`
-        : `1px solid ${
-            theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]
-          }`,
-      [`&.${chipClasses.clickable}:hover`]: {
-        backgroundColor: (theme.vars || theme).palette.action.hover,
-      },
-      [`&.${chipClasses.focusVisible}`]: {
-        backgroundColor: (theme.vars || theme).palette.action.focus,
-      },
-      [`& .${chipClasses.avatar}`]: {
-        marginLeft: 4,
-      },
-      [`& .${chipClasses.avatarSmall}`]: {
-        marginLeft: 2,
-      },
-      [`& .${chipClasses.icon}`]: {
-        marginLeft: 4,
       },
-      [`& .${chipClasses.iconSmall}`]: {
-        marginLeft: 2,
-      },
-      [`& .${chipClasses.deleteIcon}`]: {
-        marginRight: 5,
-      },
-      [`& .${chipClasses.deleteIconSmall}`]: {
-        marginRight: 3,
-      },
-    }),
-    ...(ownerState.variant === 'outlined' &&
-      ownerState.color !== 'default' && {
-        color: (theme.vars || theme).palette[ownerState.color].main,
-        border: `1px solid ${
-          theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)`
-            : alpha(theme.palette[ownerState.color].main, 0.7)
-        }`,
-        [`&.${chipClasses.clickable}:hover`]: {
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
-                theme.vars.palette.action.hoverOpacity
-              })`
-            : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-        },
-        [`&.${chipClasses.focusVisible}`]: {
-          backgroundColor: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
-                theme.vars.palette.action.focusOpacity
-              })`
-            : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity),
-        },
-        [`& .${chipClasses.deleteIcon}`]: {
-          color: theme.vars
-            ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)`
-            : alpha(theme.palette[ownerState.color].main, 0.7),
-          '&:hover, &:active': {
-            color: (theme.vars || theme).palette[ownerState.color].main,
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.dark)
+        .map(([color]) => ({
+          props: { color, clickable: true },
+          style: {
+            [`&:hover, &.${chipClasses.focusVisible}`]: {
+              backgroundColor: (theme.vars || theme).palette[color].dark,
+            },
+          },
+        })),
+      {
+        props: { variant: 'outlined' },
+        style: {
+          backgroundColor: 'transparent',
+          border: theme.vars
+            ? `1px solid ${theme.vars.palette.Chip.defaultBorder}`
+            : `1px solid ${
+                theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]
+              }`,
+          [`&.${chipClasses.clickable}:hover`]: {
+            backgroundColor: (theme.vars || theme).palette.action.hover,
+          },
+          [`&.${chipClasses.focusVisible}`]: {
+            backgroundColor: (theme.vars || theme).palette.action.focus,
+          },
+          [`& .${chipClasses.avatar}`]: {
+            marginLeft: 4,
+          },
+          [`& .${chipClasses.avatarSmall}`]: {
+            marginLeft: 2,
+          },
+          [`& .${chipClasses.icon}`]: {
+            marginLeft: 4,
+          },
+          [`& .${chipClasses.iconSmall}`]: {
+            marginLeft: 2,
+          },
+          [`& .${chipClasses.deleteIcon}`]: {
+            marginRight: 5,
+          },
+          [`& .${chipClasses.deleteIconSmall}`]: {
+            marginRight: 3,
           },
         },
-      }),
-  }),
-);
+      },
+      ...Object.entries(theme.palette)
+        .filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
+        .map(([color]) => ({
+          props: { variant: 'outlined', color },
+          style: {
+            color: (theme.vars || theme).palette[color].main,
+            border: `1px solid ${
+              theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)`
+                : alpha(theme.palette[color].main, 0.7)
+            }`,
+            [`&.${chipClasses.clickable}:hover`]: {
+              backgroundColor: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+                : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            },
+            [`&.${chipClasses.focusVisible}`]: {
+              backgroundColor: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})`
+                : alpha(theme.palette[color].main, theme.palette.action.focusOpacity),
+            },
+            [`& .${chipClasses.deleteIcon}`]: {
+              color: theme.vars
+                ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)`
+                : alpha(theme.palette[color].main, 0.7),
+              '&:hover, &:active': {
+                color: (theme.vars || theme).palette[color].main,
+              },
+            },
+          },
+        })),
+    ],
+  };
+});
 
 const ChipLabel = styled('span', {
   name: 'MuiChip',
@@ -303,26 +339,36 @@ const ChipLabel = styled('span', {
 
     return [styles.label, styles[`label${capitalize(size)}`]];
   },
-})(({ ownerState }) => ({
+})({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   paddingLeft: 12,
   paddingRight: 12,
   whiteSpace: 'nowrap',
-  ...(ownerState.variant === 'outlined' && {
-    paddingLeft: 11,
-    paddingRight: 11,
-  }),
-  ...(ownerState.size === 'small' && {
-    paddingLeft: 8,
-    paddingRight: 8,
-  }),
-  ...(ownerState.size === 'small' &&
-    ownerState.variant === 'outlined' && {
-      paddingLeft: 7,
-      paddingRight: 7,
-    }),
-}));
+  variants: [
+    {
+      props: { variant: 'outlined' },
+      style: {
+        paddingLeft: 11,
+        paddingRight: 11,
+      },
+    },
+    {
+      props: { size: 'small' },
+      style: {
+        paddingLeft: 8,
+        paddingRight: 8,
+      },
+    },
+    {
+      props: { size: 'small', variant: 'outlined' },
+      style: {
+        paddingLeft: 7,
+        paddingRight: 7,
+      },
+    },
+  ],
+});
 
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';