Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MuiThemeProvider theme prop no longer accepts function in TypeScript

See original GitHub issue

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-next.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.

Issue Analytics

State:
Created 6 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

pelotomcommented, Dec 1, 2017

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?

0reactions

trusktrcommented, May 21, 2019

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 https://github.com/mui-org/material-ui/issues/14431#issuecomment-494536911

Top Results From Across the Web

MuiThemeProvider theme prop no longer accepts function in ...

Looks like after the change as part of #9295 we can no longer pass a function to the MuiThemeProvider component.

Property 'theme' does not exist when using typescript

For anyone running into a similar error message in 2020, my issue was that I was importing makeStyles from the @material-ui/styles package.

Theming - Material UI - MUI

Theming. Customize MUI with your theme. You can change the colors, the typography and much more. The theme specifies the color of the...

Function Components - React TypeScript Cheatsheets

Function Components. These can be written as normal functions that take a props argument and return a JSX element. // Declaring type of...

How to Setup React Testing Library for Material UI Styled ...

The function accepts ReactElement and returns a wrapped component with MuiThemeProvider and theme which is used in application root. And you can use...