[material-ui][Link] TypeError: color.charAt is not a function error message

[andreachiera]

Steps to reproduce

I have defined some new colors under the colorSchemes prop, in particular two new color Schemes light and dark. For each of them I defined some new colors using the augmentColor utility obtained in this way:

let MyTheme = createTheme();
MyTheme = createTheme({
colorSchemes: {
   light: {
     myColor: MyTheme.palette.augmentColor({ { main: "#ffffff" }, "myColor" })
  },
  dark: {
     myColor: MyTheme.palette.augmentColor({ { main: "#cccccc" }, "myColor" })
  }
}
})

I'm using typescript, so I used the module augmentation before the first createTheme to extends the needed interfaces:

declare module '@mui/material/styles' {
    interface Palette {
        myColor: Palette['primary'];
    }

    interface PaletteOptions {
        myColor?: PaletteOptions['primary'];
    }
}

declare module '@mui/material/Typography' {
    interface TypographyPropsColorOverrides {
        myColor: true;
    }
}

And finally I applied a default prop to the Link component:

MyTheme = createTheme(MyTheme, {
    components:{
        MuiLink: {
           defaultProps: {
        underline: "always",
        color: "myColor"
    }
      }
    }
})

An error is thrown when I try to start my NextJs project. If I change the value of the defaultProps underline from always to hover, it works.

The error:

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

Browser: Edge

Dependencies:
"next": "^15.0.3",
both material and material-nextjs at version 6.3.0

Search keywords: A similar issue: #41772

[samuelsycamore]

Hi @andreachiera, can you share a minimal reproduction of the problem you're facing (GH repo, CodeSandbox, or similar)? This will help the maintainers to sort things out more effectively.

[andreachiera]

Hi.
Codesandbox: https://codesandbox.io/p/devbox/hardcore-panna-tqy2gc
If you comment the line 40 of the file under app/theme.config.ts and remove the comment at line 41 enabling the hover behavior, it works.

[siriwatknp]

The root cause is that the getTextDecoration does not work with custom palette, I am fixing it.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@andreachiera How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.