问无法获取:悬停或任何伪类以在react + material UI中工作

EN

import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
    root: {
        color: "#ff0000",
        "&:hover": {
            color: "#0000ff"
        }
    }
});

class JssTest extends Component {
    render() {
        return (
            <div>
                <h1 style={styles("").root}>JSS Test</h1>
            </div>
        );
    }
}

//<h1 classes={styles("").root}>JSS Test</h1>
//Styles nothing and Renders as
//<h1 classes="[object Object]">JSS Test</h1>

//<h1 style={styles("").root}>JSS Test</h1>
//Renders just the color but not the '&:hover'
//<h1 style="color: rgb(255, 0, 0);">JSS Test</h1>

//<h1 classes={classes.root}>JSS Test</h1>
//get   Line 18:  'classes' is not defined  no-undef

//<h1 classes={styles.root}>JSS Test</h1>
//renders as
//<h1>JSS Test</h1>

export default withStyles(styles)(JssTest);