text: Q:
  
  Material-UI styles ThemeProvider Error: TypeError: Cannot read property 'primary' of undefined
  
  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;
  
  A:
  
  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;
  
  