从外部Material-UI组件访问主题 [英] access the theme from outside material-ui component

问题描述

我有一个使用标准黑色主题的主题提供程序。我希望能够从我自己的自定义组件访问此主题的详细信息，但我不知道如何做到这一点。在下面的示例中，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(高阶组件)(注意我使用的是测试版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); 

这篇关于从外部Material-UI组件访问主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！