Link component does not understand custom theme colors

[fcole90]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/serene-khorana-0gor3m

Create a custom palette color, e.g. custom, then render a Link component with color="custom".

// Example theme
import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    // Based upon button colors definitions: https://www.figma.com/file/d3cTtObHACyTcIdjyBxZmbpG/Component-%E2%80%93-Button?node-id=4200%3A669
    custom: {
      main: "#000088",
      light: "#5555ff",
      dark: "#000033",
      contrastText: "#fff"
    }
  }
});

Current behavior 😯

You will get an error:

TypeError
color.charAt is not a function
    at decomposeColor (https://0gor3m.csb.app/node_modules/
mui/system/esm/colorManipulator.js:49:13
    at alpha (https://0gor3m.csb.app/node_modules/
mui/system/esm/colorManipulator.js:155:11
    at getTextDecoration (https://0gor3m.csb.app/node_modules/
mui/material/Link/getTextDecoration.js:25:38
    at eval (https://0gor3m.csb.app/node_modules/
mui/material/Link/Link.js:60:56
    at transformedStyleArg (https://0gor3m.csb.app/node_modules/
mui/system/esm/createStyled.js:148:18
    at handleInterpolation (https://0gor3m.csb.app/node_modules/
emotion/serialize/dist/emotion-serialize.cjs.dev.js:149:24
    at Object.serializeStyles (https://0gor3m.csb.app/node_modules/
emotion/serialize/dist/emotion-serialize.cjs.dev.js:274:15
    at eval (https://0gor3m.csb.app/node_modules/
emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:148:34
    at eval (https://0gor3m.csb.app/node_modules/
emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:44:12
renderWithHooks
https://0gor3m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16305:18
updateForwardRef
https://0gor3m.csb.app/node_modules/react-dom/cjs/react-

This seems to be due to how Link handles colors. It seems to work correctly if set the color to a standard CSS color value. It also works if I set it to any of the standard colors, e.g primary, secondary. This comes from a check in Link.js

// From Link.js
    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
      color
    }] : []), ...(Array.isArray(sx) ? sx : [sx])]

Expected behavior 🤔

To render a link with the color value specified in custom.main, consistently with what happens with non-custom values such as primary, secondary, etc.

The problem is that colorTransformations only contains colors defined in MUI but not ones added to the theme. I think this is a bug as it seems inconsistent with other components like Button.

Context 🔦

I want to have the link have a color specified in theme, defaulting to the main value for that palette color.

Your environment 🌎

Company repo, cannot disclose. But the same happens on CodeSandbox.

Workaround 💡

Use <Link color="custom.main">link</Link> instead of <Link color="custom">link</Link>

[siriwatknp]

duplicate #29596