材质用户界面和React＆hover选择器不起作用

Question

我有这段代码，其中的悬停选择器根本不起作用。在样式方面，其他所有功能都可以正常工作，但悬停不会执行任何可见的操作。

import React from "react";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
const styles = {
    divStyle: {
        width: "300px",
        height: "200px",
        backgroundColor: "red",
        margin: "30px",
        '&:hover': {
            border: '5px solid #000000',
            bordeBottomColor: 'transparent',
            borderRightColor: 'transparent'
        }
    }
};

const StartPage = ()=> {

    return(
        <React.Fragment>
             <Paper>
                <div style={styles.firstContainer}>
                </div>
                <div style={styles.secondContainer}>
                    <Grid container >
                        <Grid style={styles.Grid} item>
                            <div style={styles.gridDivStyle}>
                                <div style={styles.divStyle}></div>
                                <div style={styles.divStyle}></div>
                            </div>
                           <div style={styles.gridDivStyle}>
                                <div style={styles.divStyle}></div>
                                <div style={styles.divStyle}></div>
                            </div>
                        </Grid>
                    </Grid>
                </div>
                <div style={styles.lastContainer}>
                </div>
             </Paper>
        </React.Fragment>
    );

}

export default StartPage;

如何使悬停选择器起作用。我需要使用React的状态来进行更改吗？

Answer 1

如果要使用悬停样式，则可以使用包

import { withStyles } from 'material-ui/styles';

并将您的组件导出为：

export default withStyles(styles)(StartPage);