access the theme from outside material-ui component - reactjs

Question

I have a theme provider using the standard dark theme. I'd like to be able to access the details of this theme from my own custom component, but I cannot figure out how that would be done. In the example below, this.props.theme is undefined
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<App/>
</MuiThemeProvider>, document.getElementById('root')
);
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>
);
}
}

Answer 1

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

Answer 2

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);

Answer 3

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
}