[Chip] Component crashes when trying to use a custom color from the theme

[opsidao]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When settings custom colors in the theme through module augmentation, those colors make the Chip component fail at runtime with the following backtrace:

TypeError
Cannot read properties of undefined (reading 'type')
    at decomposeColor (https://1htb33.csb.app/node_modules/
mui/system/esm/colorManipulator.js:42:13
    at alpha (https://1htb33.csb.app/node_modules/
mui/system/esm/colorManipulator.js:140:11
    at ChipRoot.theme (https://1htb33.csb.app/node_modules/
mui/material/Chip/Chip.js:149:42
    at transformedStyleArg (https://1htb33.csb.app/node_modules/
mui/system/esm/createStyled.js:140:18
    at handleInterpolation (https://1htb33.csb.app/node_modules/
emotion/serialize/dist/emotion-serialize.browser.esm.js:126:24
    at serializeStyles (https://1htb33.csb.app/node_modules/
emotion/serialize/dist/emotion-serialize.browser.esm.js:226:15
    at eval (https://1htb33.csb.app/node_modules/
emotion/styled/base/dist/emotion-styled-base.browser.esm.js:106:69
    at eval (https://1htb33.csb.app/node_modules/
emotion/react/dist/emotion-element-cbed451f.browser.esm.js:110:12
renderWithHooks
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16141:18
updateForwardRef
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19968:20
beginWork
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22391:16
HTMLUnknownElement.callCallback
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4157:14
Object.invokeGuardedCallbackDev
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4206:16
invokeGuardedCallback
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4270:31
beginWork$1
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27243:7
performUnitOfWork
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26392:12
workLoopSync
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26303:5
renderRootSync
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26271:7
performSyncWorkOnRoot
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25924:20
flushSyncCallbacks
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11982:22
flushSync
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26040:7
Object.scheduleRefresh
https://1htb33.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27581:5
eval
https://1htb33.csb.app/node_modules/react-refresh/cjs/react-refresh-runtime.development.js:300:17
Object.performReactRefresh
https://1htb33.csb.app/node_modules/react-refresh/cjs/react-refresh-runtime.development.js:289:26
eval
https://1htb33.csb.app/node_modules/csbbust/refresh-helper.js:13:20

Expected behavior 🤔

The Chip component should use the custom colors without issues.

Steps to reproduce 🕹

Check this sandbox

The TextField included in the sandbox is just to show that the same approach applied in the theme.tsx file to add a custom color in the theme works just fine for that component.

If you uncomment the line with the Chip in it, you will see the error popping out.

Context 🔦

No response

Your environment 🌎

No response

[ZeeshanTamboli]

@opsidao It was crashing because it couldn't find the contrastText token in the color palette. For default palettes, the contrastText if omitted in the palette gets calculated from main, but for custom colors we wouldn't calculate to avoid run-time styles and also support CSS variables.

Thus we decided to update the docs instead to mention that all tokens should be provided if you want to use custom properties in the components for color.

See the updated CodeSandbox.

More context in #32946.

[opsidao]

Thanks a lot for looking into this @ZeeshanTamboli. @mnajdova, @siriwatknp and @danilo-leal ❤️