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.

outerTheme from MuiThemeProvider is null

See original GitHub issue

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

Expected Behavior

When passing a function as the theme prop to MuiThemeProvider the first parameter of that function is outerTheme. outerTheme should contain the actual theme properties.

Current Behavior

outerTheme is null. Trying to access any property gives an error (of course): Cannot read property 'whatever' of null.

Steps to Reproduce (for bugs)

Even the official example from the docs doesn’t work:

function theme(outerTheme) {
  return createMuiTheme({
    typography: {
      fontFamily:
        '-apple-system,system-ui,BlinkMacSystemFont,' +
        '"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
      body1: {
        fontWeight: outerTheme.typography.fontWeightMedium, // <-- Cannot read property 'typography' of null
      },
      button: {
        fontStyle: 'italic',
      },
    },
  });
}

Check it out on CodeSandbox.

Context

I wanted to overwrite the line height of body2 with the line height of body1

Your Environment

Tech	Version
Material-UI	1.0.0-beta.23
React	16.2.0
browser	Chrome 63.0.3239.84

Issue Analytics

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

Top GitHub Comments

1reaction

oliviertassinaricommented, Dec 15, 2017

Hum actually in order to no make the bundle size grow. I’m wondering if the best option isn’t to add a warning when the outerTheme is missing and not changing the behavior.

0reactions

oliviertassinaricommented, Dec 16, 2017

@nikoladev Your solution looks good. I have added a warning an updated the demos example so we can run in it codesandbox. One more though. Having codesandbox is a great tool for identifying demos that can’t be copy&paste.