Using Material-UI muiThemeable within the render function of a component?

Question

Im currently using material-ui for my web app and would like to add themes to it so Im using the MuiThemeProvider it comes with to theme it.

The documentation contains instructions on how to use custom components with themes but it unfortunately lacks instruction on how to use it from within a render function.

For example, in the the code they use is:

import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';

const DeepDownTheTree = (props) => (
  <span style={{color: props.muiTheme.palette.textColor}}>
    Hello World!
  </span>
);

export default muiThemeable()(DeepDownTheTree);

Which is fine, but if you need the render function, this wont do. How would I achieve something similar to this? (This wouldnt work, just an example):

import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';

class MyComponent extends React.Component{
  render(){
    return muiThemeable()(
      <span style={{color: props.muiTheme.palette.textColor}}>
        Hello World!
      </span>
    )
  }
}

export default muiThemeable()(DeepDownTheTree);

This is critical for my application as I manipulate bits of my DOM in the render function before returning the final DOM.

Wouldn't you just use this.props.muiTheme.palette.textColor instead? — Ben Hare
– Ben Hare, Commented Apr 9, 2017 at 15:38
I might be mistaken, Ben but while that would work I think you're supposed to take advantage of muiThemeable so it can switch colors in realtime when you switch themes. — James Heald
– James Heald, Commented Apr 9, 2017 at 19:48

Ben Hare · Accepted Answer · 2017-04-09 15:47:19Z

3

The equivalent statefull component to your initial stateless component would be

import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';

class MyComponent extends React.Component{
  render(){
    return (
      <span style={{color: this.props.muiTheme.palette.textColor}}>
        Hello World!
      </span>
    )
  }
}

export default muiThemeable()(DeepDownTheTree);

Note that you use the higher order function (that's the muiThemable()) on the entire component, not on just what is returned from the render function.

answered Apr 9, 2017 at 15:47

Ben Hare

4,4355 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Material-UI muiThemeable within the render function of a component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related