javascript - Material-UI 样式 ThemeProvider 错误 : TypeError: Cannot read property 'primary' of undefined

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;