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

我不确定您要使用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;

Answer 2

我还有另一个错误，已解决here