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實現什么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

我還有另一個錯誤，已在此處修復