MuiThemeProvider theme prop no longer accepts function in TypeScript

[ianschmitz]

Looks like after the change as part of #9295 we can no longer pass a function to the MuiThemeProvider component. An example of this can be seen in the docs at https://material-ui.com/customization/themes/#nesting-the-theme.

It worked before because of the generic used here:

export interface MuiThemeProviderProps {
  theme?: Theme<any>;
...

Perhaps the prop should be a theme: Theme | (theme: Theme) => Theme or something like that? Note the lack of the ? on the item. The theme is marked as required by the component, so the interface should reflect that.

[pelotom]

Yep, looks like the increased type safety afforded by #9295 exposed a bug in the typing of MuiThemeProviderProps. Would you care to open a PR for this?

[ianschmitz]

Sure thing @pelotom. Are we happy with the proposed type? I haven't thought too extensively about it, but seems like what we are after. Only gotcha will be for the top level MuiThemeProvider on an app, which should be strictly a Theme object and not a function i believe (i'm fairly sure it breaks if you try to pass a function).

[pelotom]

At the top level you can still pass a function, it will just receive null, so the type should probably be

theme: Theme | ((outer: Theme | null) => Theme);

[pelotom]

This is a typing-only issue, so it can’t affect runtime behavior.

[trusktr]

For anyone stumbling here with an error like the following (because the above discussion has similar typings mentioned and make this result pop up on Google searches),

Type 'Theme' is not assignable to type 'Theme | ((outerTheme: Theme) => Theme)'.

see #14431 (comment)