score:13

Accepted answer

you need to use the hoc (higher order component) provided with material-ui (note i am using the beta version, ymmv).

example:

leftnavigation.jsx

import react from 'react';
import proptypes from 'prop-types';
import hidden from 'material-ui/hidden';
import drawer from 'material-ui/drawer';
import list from 'material-ui/list';
import divider from 'material-ui/divider';

import { withstyles } from 'material-ui/styles';

import { mailfolderlistitems, othermailfolderlistitems } from '../../../components/tiledata';

const styles = theme => ({
  docked: {
    height: '100%',
  },
  drawerpaper: {
    width: 250,
    height: '100%',
    [theme.breakpoints.up('md')]: {
      width: theme.drawerwidth,
      position: 'relative',
      height: '100%',
    },
  },
  drawerheader: theme.mixins.toolbar,
});

class leftnavigation extends react.component {
  render() {
    const { classes, theme } = this.props;

    const drawer = (
      <div>
        <div classname={classes.drawerheader} />
        <divider />
        <list><mailfolderlistitems toggle={this.props.handledrawertoggle} /></list>
        <divider />
        <list><othermailfolderlistitems toggle={this.props.handledrawertoggle} /></list>
      </div>
    );

    return [
      <hidden mdup key="mobile">
        <drawer
          type="temporary"
          anchor={theme.direction === 'rtl' ? 'right' : 'left'}
          open={this.props.mobileopen}
          classes={{ paper: classes.drawerpaper }}
          onrequestclose={this.props.handledrawertoggle}
          modalprops={{ keepmounted: true /* better open performance on mobile. */ }}
        >
          {drawer}
        </drawer>
      </hidden>,
      <hidden mddown implementation="css" key="desktop">
        <drawer
          type="permanent"
          open
          classes={{
            docked: classes.docked,
            paper: classes.drawerpaper,
          }}
        >
          {drawer}
        </drawer>
      </hidden>,
    ];
  }
}

leftnavigation.proptypes = {
  classes: proptypes.object.isrequired,
  theme: proptypes.object.isrequired,
  mobileopen: proptypes.bool.isrequired,
  handledrawertoggle: proptypes.func.isrequired
};

export default withstyles(styles, { withtheme: true })(leftnavigation);

the const styles = theme => ({...}) is where you define your styles.

the export default withstyles(styles, { withtheme: true })(leftnavigation); shows the usage with the higher order component to pass the styles / theme down to your component.

i use withtheme: true so that not only my styles, but the theme is passed as well.

so for your code, i would do the following:

import { withstyles } from 'material-ui/styles';

const styles = theme => ({
  root: {
    height: '100%'
  }
})

class app extends component {
    render() {
        const {classes} = this.props;
        return (
            <div classname="app">
                <mainmenu/>
                <div classname={classes.root}>
                    <grid container spacing={8}>
                        <grid item xs>
                            <chart theme={this.props.theme}/>
                        </grid>
                    </grid>
                </div>
            </div>
        );
    }
}

export default withstyles(styles, { withtheme: true})(app); 

score:0

and for people using typesctipt and class components, you'll also need to add:

export interface mycomponentnameprops extends withstyles<typeof styles, true> {
// your props here...
theme: theme
}

score:22

you can also use the usetheme hook!

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

function deepchild() {
  const theme = usetheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component


Related Query

More Query from same tag