Material-UI styles ThemeProvider Error: TypeError: Cannot read property 'primary' of undefined

Question

I'm trying to include some components from @material-ui package at my app, using the ThemeProvider at the root, but i'm having some troubles.

Other components that use styles defined locally (without theme properties) render ok.

sandbox: https://codesandbox.io/s/theme-provider-issues-t72f3

Here is how the theme is being created:

import React from "react";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import { blue, white } from "@material-ui/core/colors";

function AppTheme(props) {
  const theme = createMuiTheme({
    palette: {
      primary: blue,
      text: white
    }
  });
  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
}

export default AppTheme;

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-06-18T21:59:55

I'm not certain what you were trying to achieve with text: white, but that created an invalid structure for your theme. theme.palette.text should be an object rather than a color, and the error was caused by Material-UI looking for theme.palette.text.primary.

Changing AppTheme.js to the following solves the problem:

import React from "react";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import { blue } from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: blue
  }
});
function AppTheme(props) {
  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
}

export default AppTheme;

Material-UI styles ThemeProvider Error: TypeError: Cannot read property 'primary' of undefined

2 Answers