Material-UI样式ThemeProvider错误：TypeError：无法读取未定义的属性“ primary”

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;

Answer 1

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;

Answer 2

我还有另一个错误，已在此处修复