diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
index 00af054fe6b24a..824c3fcd1ecc35 100644
--- a/packages/mui-material/src/Alert/Alert.js
+++ b/packages/mui-material/src/Alert/Alert.js
@@ -58,7 +58,7 @@ const AlertRoot = styled(Paper, {
     padding: '6px 16px',
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light)
+        .filter(([, value]) => value && value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'standard' },
           style: {
@@ -76,7 +76,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light)
+        .filter(([, value]) => value && value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'outlined' },
           style: {
@@ -92,7 +92,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.dark)
+        .filter(([, value]) => value && value.main && value.dark)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'filled' },
           style: {
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index 2d85cb28fb18e0..0551398ba2ddd8 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -114,13 +114,9 @@ const AppBarRoot = styled(Paper, {
         }),
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           '--AppBar-background': (theme.vars ?? theme).palette[color].main,
diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
index 2b0e68da5f6001..0750bffbdcf8cc 100644
--- a/packages/mui-material/src/Badge/Badge.js
+++ b/packages/mui-material/src/Badge/Badge.js
@@ -89,13 +89,9 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen,
   }),
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           backgroundColor: (theme.vars || theme).palette[color].main,
diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index 3caec7c29e7aab..94d8909fa339ab 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -160,7 +160,7 @@ const ButtonRoot = styled(ButtonBase, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, palette]) => palette.main && palette.dark && palette.contrastText)
+        .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
         .map(([color]) => ({
           props: { color },
           style: {
diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
index 179dec4ae71074..ad8c14004b9847 100644
--- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js
+++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js
@@ -160,7 +160,7 @@ const ButtonGroupRoot = styled('div', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .flatMap(([color]) => [
         {
           props: { variant: 'text', color },
@@ -224,7 +224,7 @@ const ButtonGroupRoot = styled('div', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.dark)
+      .filter(([, value]) => value && value.dark)
       .map(([color]) => ({
         props: { variant: 'contained', color },
         style: {
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
index 342ecab31729ea..3ee5d2c856ede9 100644
--- a/packages/mui-material/src/Checkbox/Checkbox.js
+++ b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -64,7 +64,7 @@ const CheckboxRoot = styled(SwitchBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
@@ -76,7 +76,7 @@ const CheckboxRoot = styled(SwitchBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
index 3e66a758d40a05..c0e2c0dde5bbdb 100644
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -164,7 +164,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.contrastText)
+        .filter(([, value]) => value && value.main && value.contrastText)
         .map(([color]) => {
           return {
             props: { color },
@@ -212,7 +212,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.dark)
+        .filter(([, value]) => value && value.dark)
         .map(([color]) => {
           return {
             props: { color, onDelete: true },
@@ -251,7 +251,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.dark)
+        .filter(([, value]) => value && value.dark)
         .map(([color]) => ({
           props: { color, clickable: true },
           style: {
@@ -296,7 +296,7 @@ const ChipRoot = styled('div', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
+        .filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
         .map(([color]) => ({
           props: { variant: 'outlined', color },
           style: {
diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js
index ec9762b0e23c9b..9be1a8db6b74bd 100644
--- a/packages/mui-material/src/CircularProgress/CircularProgress.js
+++ b/packages/mui-material/src/CircularProgress/CircularProgress.js
@@ -100,7 +100,7 @@ const CircularProgressRoot = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js
index ddd85203a3d2b3..cdb560dd8c09d7 100644
--- a/packages/mui-material/src/Fab/Fab.js
+++ b/packages/mui-material/src/Fab/Fab.js
@@ -136,7 +136,7 @@ const FabRoot = styled(ButtonBase, {
   ({ theme }) => ({
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
index 2173dc9a565410..5d243249930f48 100644
--- a/packages/mui-material/src/FilledInput/FilledInput.js
+++ b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -126,7 +126,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main) // check all the used fields in the style below
         .map(([color]) => ({
           props: {
             disableUnderline: false,
diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js
index 1eb1fcad5dfc2a..efa75c022f23c8 100644
--- a/packages/mui-material/src/FormLabel/FormLabel.js
+++ b/packages/mui-material/src/FormLabel/FormLabel.js
@@ -47,7 +47,7 @@ export const FormLabelRoot = styled('label', {
   position: 'relative',
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js
index b6b029436f3761..e382b2f5b4ed17 100644
--- a/packages/mui-material/src/Icon/Icon.js
+++ b/packages/mui-material/src/Icon/Icon.js
@@ -103,7 +103,7 @@ const IconRoot = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index d8e82be194ce65..c0892ab7a6db9f 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -104,7 +104,7 @@ const IconButtonRoot = styled(ButtonBase, {
           },
         },
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value.main) // check all the used fields in the style below
+          .filter(([, value]) => value && value.main) // check all the used fields in the style below
           .map(([color]) => ({
             props: { color },
             style: {
@@ -112,7 +112,7 @@ const IconButtonRoot = styled(ButtonBase, {
             },
           })),
         ...Object.entries(theme.palette)
-          .filter(([, value]) => value.main) // check all the used fields in the style below
+          .filter(([, value]) => value && value.main) // check all the used fields in the style below
           .map(([color]) => ({
             props: { color, disableRipple: false },
             style: {
diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
index e674c0c583c89b..2b511501b95efe 100644
--- a/packages/mui-material/src/Input/Input.js
+++ b/packages/mui-material/src/Input/Input.js
@@ -115,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { color, disableUnderline: false },
           style: {
diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js
index c1b70fb5af7398..ddc40f02efc5ed 100644
--- a/packages/mui-material/src/LinearProgress/LinearProgress.js
+++ b/packages/mui-material/src/LinearProgress/LinearProgress.js
@@ -143,7 +143,7 @@ const LinearProgressRoot = styled('span', {
   },
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -201,7 +201,7 @@ const LinearProgressDashed = styled('span', {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => {
           const backgroundColor = getColorShade(theme, color);
           return {
@@ -252,7 +252,7 @@ const LinearProgressBar1 = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -317,7 +317,7 @@ const LinearProgressBar2 = styled('span', {
   transformOrigin: 'left',
   variants: [
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
@@ -339,7 +339,7 @@ const LinearProgressBar2 = styled('span', {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color, variant: 'buffer' },
         style: {
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
index 489d82c23d2332..ae743d2a438958 100644
--- a/packages/mui-material/src/Link/Link.js
+++ b/packages/mui-material/src/Link/Link.js
@@ -84,7 +84,7 @@ const LinkRoot = styled(Typography, {
         },
       },
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { underline: 'always', color },
           style: {
diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
index 31242bf1393ea3..cddb78bfd06f8e 100644
--- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js
+++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js
@@ -54,7 +54,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value && value.main)
         .map(([color]) => ({
           props: { color },
           style: {
diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js
index 7823ae791cd28e..07c4df53b50452 100644
--- a/packages/mui-material/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-material/src/PaginationItem/PaginationItem.js
@@ -214,7 +214,7 @@ const PaginationItemPage = styled(ButtonBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main && value.dark && value.contrastText)
+      .filter(([, value]) => value && value.main && value.dark && value.contrastText)
       .map(([color]) => ({
         props: { variant: 'text', color },
         style: {
@@ -238,7 +238,7 @@ const PaginationItemPage = styled(ButtonBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main && value.light)
+      .filter(([, value]) => value && value.main && value.light)
       .map(([color]) => ({
         props: { variant: 'outlined', color },
         style: {
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index ff0cc0e8f0265c..7aa76e7d0395e6 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -59,7 +59,7 @@ const RadioRoot = styled(SwitchBase, {
       },
     },
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
@@ -71,7 +71,7 @@ const RadioRoot = styled(SwitchBase, {
         },
       })),
     ...Object.entries(theme.palette)
-      .filter(([, palette]) => palette.main)
+      .filter(([, palette]) => palette && palette.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 5759dc932e503c..8ed7a63e3407d1 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -59,9 +59,9 @@ export const SliderRoot = styled('span', {
     },
   },
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           color: (theme.vars || theme).palette[color].main,
@@ -201,9 +201,9 @@ export const SliderTrack = styled('span', {
           display: 'none',
         },
       },
-      ...Object.keys((theme.vars ?? theme).palette)
-        .filter((key) => (theme.vars ?? theme).palette[key].main)
-        .map((color) => ({
+      ...Object.entries(theme.palette)
+        .filter(([, palette]) => palette && palette.main)
+        .map(([color]) => ({
           props: { color, track: 'inverted' },
           style: {
             ...(theme.vars
@@ -301,9 +301,9 @@ export const SliderThumb = styled('span', {
         transform: 'translate(-50%, 50%)',
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&:hover, &.${sliderClasses.focusVisible}`]: {
diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.js b/packages/mui-material/src/SvgIcon/SvgIcon.js
index 37774cfad0e027..7aeae60d5f7539 100644
--- a/packages/mui-material/src/SvgIcon/SvgIcon.js
+++ b/packages/mui-material/src/SvgIcon/SvgIcon.js
@@ -71,7 +71,7 @@ const SvgIconRoot = styled('svg', {
     },
     // TODO v5 deprecate color prop, v6 remove for sx
     ...Object.entries((theme.vars ?? theme).palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: { color: (theme.vars ?? theme).palette?.[color]?.main },
diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js
index 40811807f1c0bf..0731297c81972e 100644
--- a/packages/mui-material/src/Switch/Switch.js
+++ b/packages/mui-material/src/Switch/Switch.js
@@ -150,7 +150,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
     },
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main && value.light) // check all the used fields in the style below
+        .filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
         .map(([color]) => ({
           props: { color },
           style: {
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js
index c9224e80889d4f..f80211201960b8 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.js
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.js
@@ -87,13 +87,9 @@ const ToggleButtonRoot = styled(ButtonBase, {
         },
       },
     },
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&.${toggleButtonClasses.selected}`]: {
diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js
index 2e1420999641d2..429eecda452c3e 100644
--- a/packages/mui-material/src/Typography/Typography.js
+++ b/packages/mui-material/src/Typography/Typography.js
@@ -63,7 +63,7 @@ export const TypographyRoot = styled('span', {
         style: value,
       })),
     ...Object.entries(theme.palette)
-      .filter(([, value]) => value.main)
+      .filter(([, value]) => value && value.main)
       .map(([color]) => ({
         props: { color },
         style: {
diff --git a/packages/test-utils/src/describeConformance.tsx b/packages/test-utils/src/describeConformance.tsx
index 3063749ac0d095..1c5b6505118dfe 100644
--- a/packages/test-utils/src/describeConformance.tsx
+++ b/packages/test-utils/src/describeConformance.tsx
@@ -995,6 +995,7 @@ function testThemeCustomPalette(element: React.ReactElement, getOptions: () => C
           custom: {
             main: '#ff5252',
           },
+          unknown: null,
         },
       });