React Material UI : 'theme' is not defined no-undef

Active3 hr before
Viewed126 times

8 Answers


Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow help chat ,I am getting error Uncaught ReferenceError: theme is not defined

In your Topic.js file try using useTheme hook like this:

import React, { Component } from 'react';
import { Typography, makeStyles, Box, Paper } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';

const style = makeStyles(theme => ({
    paper : {
        background : '#ff00ff'

export const Topic = (props) => {

    const classes = style()
    const theme = useTheme();

    return (
            <Paper className={}>
                <Typography variant="h6" component="h6" gutterBottom>

export default Topic

 Pretag team - issue, fix, solve, resolve

If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. However, this is optional; Material-UI components come with a default theme.,ThemeProvider relies on the context feature of React to pass the theme down to the components, so you need to make sure that ThemeProvider is a parent of the components you are trying to customize. You can learn more about this in the API section.,The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.

<ThemeProvider theme={theme}>
  <CustomCheckbox />
load more v

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import {Theme} from '@material-ui/core';

export interface StyleProps {
    height: number;

const useStyles = makeStyles<Theme, StyleProps>(theme => ({
  root: {
    background: 'green',
    height: ({height}) => height,

export default function Hook() {

  const props = {
    height: 48

  const classes = useStyles(props);
  return <Button className={classes.root}>Styled with Hook API</Button>;

Note: it seems the plain JS sample code (no hooks) works - so this has something to do with the Material-UI and React 16.8.0-alpha.1. However- this version is required to use the sample hooks code.,Hey folks, thanks for your work on this project. I am having the exact same issue. With ThemeProvider the theme doesn't seem to be applied. I am definitely doing the bootstrap step.,Paste this code into the test app's /src/App.js file (overwrite the existing code) and save

    "react": "^16.8.0-alpha.1",
    "react-dom": "^16.8.0-alpha.1",
load more v

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.,Appreciate your help big time! I have tried everything and feeling pretty stumped right now… Alex,Powered by Discourse, best viewed with JavaScript enabled

Here is my root blaze html template:

<template name="main">
    <div id="wrap">
      <div id="react-app-wrapper">
        {{> React component=App}}
load more v

Line 85:3: 'handleDrawerClose' is not defined no-undef,Hello all, I am getting a strange error that I cant seem to solve. I am trying to add a drawer component from Material UI however I keep getting an error that says,I am very confused on how handleDrawerOpen and handleDrawerClose coming up as undefined. Any help would be greatly appreciated!

Hello all, I am getting a strange error that I cant seem to solve. I am trying to add a drawer component from Material UI however I keep getting an error that says

Line 81: 3: 'handleDrawerOpen'
is not defined no - undef
load more v

Configure Route for each menu items. have pasted the entire Header.js file code here .. then I will explain the main topic which needs to aware,Use Effect- Occurs when component loaded completely,    children: PropTypes.element.isRequired,  

 Pretag team - issue, fix, solve, resolve

Other "defined-react" queries related to "React Material UI : 'theme' is not defined no-undef"


Related Questions