无法让 :hover 或任何伪类在 react + material UI 中工作

Question

我已经让所有其他样式对象工作，但由于某种原因，伪类似乎没有呈现，或者它们抛出错误我正在使用 jss-preset-default 设置。 jssTest 组件下方是我尝试过的不同组合的注释示例，以及我检查它们时它们的呈现方式。

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

Answer 1

终于想通了将 className 设置为 this.props.classes.root 希望这可以避免其他人浪费一天

<h1 className={this.props.classes.root}>JSS Test</h1>

Answer 2

而不是<h1 style={styles("").root}>JSS Test</h1> 使用<h1 className={this.props.classes.root}>JSS Test</h1>