2

EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies

I am trying to use Material-UI's withTheme to access the theme in a component.

I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function and highlights the code line > 17 | export default withTheme()(WithTheme);

I have cut down the sample code to the most basic use of withTheme() and am still receiving this error

withtheme.js

import React from 'react';
import { withTheme } from 'material-ui/styles';

function WithTheme() {
  
    const styles = {
        primaryText: {
            color: 'red',
        }
    };

    return (
        <h1 style={styles.primaryText}>Hello</h1>
    );
}

export default withTheme()(WithTheme);

EDIT: To help clarify the problem, here is the App.js file.

import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';

import AppBar from 'material-ui/AppBar';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import WithTheme from './components/withtheme';

const Theme = getMuiTheme({
  palette: {
    primary1Color: brown900,
    primary2Color: brown500,
  }
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={Theme} >
          <AppBar
            title="Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more" />
          <WithTheme />
      </MuiThemeProvider>
    );
  }
}

export default App;

I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.

My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color

**End Edit

Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.

Thanks

4 Answers 4

2

As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI v3.1.2 docs

import { withTheme } from '@material-ui/core/styles';
export default withTheme()(WithTheme);
Sign up to request clarification or add additional context in comments.

Comments

2

As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).

So now it is:

import { withTheme } from '@material-ui/styles';

export default withTheme(MyComponent);

Comments

1

No need to use withStyles() unless if you want to make a specific style for the component

Warp your App with MuiThemeProvider then you are able to use the theme properly

Material-Ui 0.20.0

For access theme colors use getMuiTheme

import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)

http://www.material-ui.com/#/components/app-bar

Working Demo

Material-Ui 1.0.0 beta

For access theme colors use withTheme

import { withTheme } from 'material-ui/styles';
export default withTheme()(App)

https://material-ui-next.com/demos/app-bar/

Working Demo V1

2 Comments

Thanks for the reply and the samples. I have updated the question as I think I am already using MuiThemeProvider correctly. I want to use the theme colors in my own components
Well, I updated the answer with an example for two version, will help you to understand how to use withTheme and getMuiTheme
0

If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.

export default withStyles(styles)(WithTheme);

1 Comment

I have successfully customised the theme with getMuiTheme, but I want to access the theme properties from within my own components, so ultimately I would like to use one of the theme colours in place of color: 'red', but in trying to track down the issue with the function I cut all that code away to simplify. I did howver see withStyles used in some examples and was unsure what the difference between withStyles and withTheme was

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.