Стили Material-UI ThemeProvider Ошибка: TypeError: Невозможно прочитать свойство 'primary' из неопределенного

Question

Я пытаюсь включить некоторые компоненты из пакета @ material-ui в свое приложение, используя ThemeProvider в корне, но у меня возникают некоторые проблемы.

Другие компоненты, которые используют стили, определенные локально (без свойств темы) рендер нормально.

песочница: https://codesandbox.io/s/theme-provider-issues-t72f3

Вот как создается тема:

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

У меня есть другая ошибка, была исправлена ​​ здесь

Answer 2

Я не уверен, чего вы пытались достичь с помощью text: white, но это создало недопустимую структуру для вашей темы.theme.palette.text должен быть объектом, а не цветом, и ошибка была вызвана Material-UI, который ищет theme.palette.text.primary.

Изменение AppTheme.js на следующее решает проблему:

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;