I'm trying to include some ponents from @material-ui package at my app, using the ThemeProvider at the root, but i'm having some troubles.

Other ponents that use styles defined locally (without theme properties) render ok.

sandbox:

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;

I'm trying to include some ponents from @material-ui package at my app, using the ThemeProvider at the root, but i'm having some troubles.

Other ponents 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;

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Jun 18, 2019 at 21:52 Ryan Cogswell 81.3k99 gold badges241241 silver badges212212 bronze badges asked Jun 18, 2019 at 21:28 dkotsukadkotsuka 6311 gold badge22 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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;

I've got another error, was fixed here