material-uiでwithStylesをしようとするとclassesがundefinedになる

Question

現在、rails webpackerにてmaterial-uiを使ってSPAの開発をしています。

material-ui公式のドキュメント(Full-height navigation)
と
Qiitaの記事(React: Material-UIのwithStyles()でCSSをJavaScriptコードに定める)
をもとに、以下のようにコードを書きました。

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom'
import { makeStyles } from '@material-ui/core/styles'
import Drawer from '@material-ui/core/Drawer'
import AppBar from '@material-ui/core/AppBar'
import CssBaseline from '@material-ui/core/CssBaseline'
import Toolbar from '@material-ui/core/Toolbar'
import List from '@material-ui/core/List'
import Typography from '@material-ui/core/Typography'
import Divider from '@material-ui/core/Divider'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import InboxIcon from '@material-ui/icons/MoveToInbox'
import MailIcon from '@material-ui/icons/Mail'
import { withStyles, MuiThemeProvider } from '@material-ui/core/styles'
import About from './About'
import Home from './Home'

const drawerWidth = 240

const styles = (theme) => ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: drawerWidth,
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  toolbar: theme.mixins.toolbar,
});

class App extends Component {
  cpHome = () => {
    this.props.history.push('/')
  }
  
  cpAbout = () => {
    this.props.history.push('/About')
  }

  render() {
    return (
      <div className={this.props.classes.root}>
        <CssBaseline />
        <AppBar position="fixed" className={this.props.classes.appBar}>
          <Toolbar>
            <Typography variant="h6" noWrap>
              Clipped drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          className={this.props.classes.drawer}
          variant="permanent"
          classes={{
            paper: this.prpos.classes.drawerPaper,
          }}
        >
          <div className={this.props.classes.toolbar} />
          <List>
            <ListItem button onClick={this.cpHome}>
              <ListItemText primary={'Home'} />
            </ListItem>
            <ListItem button onClick={this.cpAbout}>
              <ListItemText primary={'About'} />
            </ListItem>
          </List>
        </Drawer>
        <main className={this.props.classes.content}>
          <Router>
            <div>
              <Route exact path='/' component={Home}/>
              <Route path='/About' render={ () => <About name='shoya' /> }/>
            </div>
          </Router>
        </main>
      </div>
    )
  }
}

export default withStyles(styles)(withRouter(App))

render(
  <App />,
  document.getElementById('app')
);

がしかし、実際に記述したコードを実行すると

Cannot read property 'root' of undefined

とコンソールに表示されます。

試しに、上記のコードから

className={this.props.classes.root}

の記述を削除して実行してみたところ、

Cannot read property 'appBar' of undefined

と表示されます。(おそらくthis.props.classesに問題がある？classes自体がundefinedなのだろうか？)

material-uiは日本語のドキュメントも少なく、とても苦戦しております...。
ぜひお力添えお願いします。

足りない情報があれば追記します。

Answer 1

こんにちは

以下の回答は、ご質問に掲載のソースコードが(たとえば index.jsだったりの）ひとつのファイルに書かれているものと解釈しての回答になります。（これが違っていたら、コメントからお知らせください。）

以下の部分、

修正前：

export default withStyles(styles)(withRouter(App))

render(
  <App />,
  document.getElementById('app')
);

を、たとえば以下のように修正してみると、いかがでしょうか？

修正後：

const AppWithStylesAndRouter = withStyles(styles)(withRouter(App))

render(
  <AppWithStylesAndRouter />,
  document.getElementById('app')
);

修正前のものだと、 withStyles によって classes がpropsに追加される前の App をマウントしてしまいます。

以上参考になれば幸いです。

追記

コメントから頂きました、別のエラーの対応ですが、

import { BrowserRouter as Router, Route, withRouter } from 'react-router-dom'

で import している BrowserRouter as Router を使って、render の第一引数を以下のように、AppWithStylesAndRouter を Routerで囲むように修正してみるといかがでしょうか？

render(
  <Router>
    <AppWithStylesAndRouter />
  </Router>,
  document.getElementById('app')
);

Comments

[wisheebell]

回答ありがとうございます
今確認してみたところ
You should not use <withRouter(App) /> outside a <Router>
とエラーが出ました。
これについてはわかりますか？

[jun68ykt]

コメントありがとうございます。

> You should not use <withRouter(App) /> outside a <Router>
の対策を、回答のほうに追記しました。

[wisheebell]

ありがとうございます。
再度、追記の内容も確認してみましたが、以下のエラーが出てきました。

Cannot read property 'classes' of undefined

[jun68ykt]

> Cannot read property 'classes' of undefined

上記のエラーが発生したのは、どこの行なのかは分かりますか？

[wisheebell]

69行目のようです

68: classes={{
69: paper: this.prpos.classes.drawerPaper,
70: }}

[jun68ykt]

以下にスペルミスがあります。

<Drawer
className={this.props.classes.drawer}
variant="permanent"
classes={{
paper: this.prpos.classes.drawerPaper,
}}
>

上記の中で

paper: this.prpos.classes.drawerPaper,

となっていて、 this.prpos となっていますが、これは this.props のタイポですね。

[jun68ykt]

> 69行目のようです

エラー行の特定、ありがとうございます。
はい。
先のコメントにも書きましたが、

> 69: paper: this.prpos.classes.drawerPaper,

で、 classes の前が、 this.prpos となっています。正しくは this.props ですね。

[jun68ykt]

その後いかがでしょうか。ご質問のタイトルにある、
「material-uiでwithStylesをしようとするとclassesがundefinedになる」
という問題については解決しましたでしょうか？

[wisheebell]

確認ありがとうございます。
こちらの些細な確認ミスで申し訳ないです...。

書き直してみたところ、正常に動作しました！
とても助かりました！ありがとうございます

[jun68ykt]

どういたしまして。

> 書き直してみたところ、正常に動作しました！

とのことでよかったです ????