从外部 material-ui 组件访问主题

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
}