外部の素材からテーマにアクセスする

Question

標準の暗いテーマを使用しているテーマプロバイダがあります。自分のカスタムコンポーネントからこのテーマの詳細にアクセスしたいと思っていますが、どうやったらそれができるのか分かりません。以下の例では、this.props.themeはあなたが材料-UI（私はベータ版、YMMVを使用しています注意してください）が設けられてHOC（高次成分）を使用する必要が未定義

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

です。

例：あなたがあなたのスタイルを定義し

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