[Button] invalid color prop cause error with no fallback value.

[mogamogua]

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/blue-fog-3mwkd5?file=/src/App.tsx

Steps:

1. invalid variant prop is passed to button, but app is not crashed.
2. click the 'Show' button to render button which get invalid color prop.
3. app is crashed.

Current behavior 😯

because most of component use ownerState.color as theme object's key without optional chaining,
(like this)
It can cause error when invalid color prop value is passed: (Cannot read properties of undefined (reading 'main'))

rror.

Expected behavior 🤔

I definitely agree with that type error should be occurred when invalid value has passed, but I think It should not crash entire app with error.

like other props, component should be rendered with default style.

e.g.) Button with variant="blahblah" is displaying default style with console e

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.