[material-ui] Tabs component indicatorColor does not accept custom theme colors

[mattixittam]

Steps to reproduce

Link to live example: Example

Steps:

1. Define a custom theme color, I went with 'aCustomColor'
2. Use the color in the indicatorColor prop: <Tabs indicatorColor="aCustomColor">[...]</Tabs>

Current behavior

The Tabs component does not accept custom theme colors for the indicator

Expected behavior

I would like the Tabs component to accept custom theme colors for the indicator

Context

I want to have the option to use a custom theme color in some places instead of the primary/secondary options that are now hardcoded into the component css.

Your environment

Environment as in the example code sandbox, so nothing special or custom.

Search keywords: indicator, tabs, custom color, theme

[mnajdova]

Thanks for the report. We can improve the support for this, by applying the following diff:

index 3bafb2efbb..8b6e49ef43 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -234,22 +234,12 @@ const TabsIndicator = styled('span', {
   width: '100%',
   transition: theme.transitions.create(),
   variants: [
-    {
-      props: {
-        indicatorColor: 'primary',
-      },
-      style: {
-        backgroundColor: (theme.vars || theme).palette.primary.main,
-      },
-    },
-    {
-      props: {
-        indicatorColor: 'secondary',
-      },
-      style: {
-        backgroundColor: (theme.vars || theme).palette.secondary.main,
-      },
-    },
+    ...Object.entries((theme.vars ?? theme).palette)
+      .filter(([, value]) => value && value.main)
+      .map(([color]) => ({
+        props: { indicatorColor: color },
+        style: { backgroundColor: (theme.vars ?? theme).palette?.[color]?.main },
+      })),
     {
       props: ({ ownerState }) => ownerState.vertical,
       style: {

Would you like to create a PR with this change? We can also add test to ensure it won't be changed in the future.