[system] Verify correctiveness of theme during `createMuiTheme`

[zhming0]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

This feature will ensure correctiveness of theme's being verified during createMuiTheme.

Alternatively, a function to verify correctness of the theme could be helpful too.

Examples 🌈

// This should throw an error during initialization
const theme = createMuiTheme({
  palette: {
    primary: 'random string'
  }
})

Motivation 🔦

At the moment, Typescript can enforce the correctness of theme structure, but it can't verify the content of them. The content of theme seems to get verified during runtime when a component is consuming a part of it.

This causes an issue that front-end page crashes when you navigate to a MUI component that consume an invalid part of theme via decomposeColor function. For above example, you would see Material-UI: unsupported XXXX color and page crashes

At this moment, to ensure the theme is valid, we will have to either:

1. unit-test all components's behavior under custom theme (renderWithTheme etc..)
2. make a dedicated test scaffolding for theme to verify the content
3. manually check all components on UI

It'd be great if createMuiTheme can create a safety net for us.

Alternative

Handle the error thrown by decomposeColor gracefully

[eps1lon]

That sounds like a very useful feature.

We would probably only do this in a dev environment with a warning only. At least for things that will definitely not throw during createMuiTheme. Everything that only throws in components has to be warning only since we don't know how components might behave with different types.