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

richbai90

我有一个使用标准深色主题的主题提供程序。我希望能够从自己的自定义组件中访问此主题的详细信息，但是我不知道该怎么做。在以下示例中，this.props.theme未定义

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

插口

您需要使用material-ui随附的HOC（高阶组件）（请注意，我使用的是beta版的YMMV）。

例：

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

该const styles = theme => ({...})是你定义你的风格。

该export default withStyles(styles, { withTheme: true })(LeftNavigation);节目与高阶组件的使用通过样式/主题到您的组件。

我使用的withTheme: true不仅是样式，而且主题也可以通过。

因此，对于您的代码，我将执行以下操作：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。