withStyles : TypeError: prevDeps is undefined

Viewed 1285

I'm currently training on ReactJS. I'm using material-ui.

I don't know if my understanding about withStyles is ok.

With this simple code (see below), I got TypeError: prevDeps is undefined.

If I remove setState in app component, it's ok.

If I change the line withStyles(styles)(Test) by `withStyles(myJss)(Test) in test component, it's ok.

Why ? Any idea ?

Thanks for help ;)

myJss.js

const myJss = theme => ({
    textCenter : {
        textAlign:'center'
    }
});

export default myJss;

app.js

import React, { Component } from 'react'
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Test from '../components/test'
import myJss from 'assets/jss/myJss.js';
const styles = makeStyles(myJss);

class App extends Component {

    constructor (props) {
        super(props)
        this.state = ({
            test:false
        })
    }

    componentDidMount () {
        this.setState({test:true})
    }

    render () {
        return (
            <div>
                APP
                <Test />
            </div>
        )
    }
}
export default withStyles(styles)(App)

test.js

import React, { Component } from 'react'
import { makeStyles, withStyles } from "@material-ui/core/styles";
import myJss from 'assets/jss/myJss.js';
import classNames from "classnames";
const styles = makeStyles(myJss);

class Test extends Component {
    constructor (props) {
        super(props)
        this.state = {
            searchText:""
        };
    }
    render() {
        const { classes } = this.props;

        return (
            <div className={classNames(classes.textCenter)}>test2</div>
        );
    }
}

export default withStyles(styles)(Test)
1 Answers

I think that happens because styles is a function and you can't pass a function to withStyle.

When you create another file and export myJss, it returns the style that already generated in myJss file which is a object that you can pass to withStyle.

Related